自定义按钮的实现简述

自定义按钮两种使用方式，下面我们结合例子介绍一下。（官网实例）
两种实现方式分别为：

1. 直接定义

2. 另一种是先 定义扩展 ，而后直接在按钮中使用扩展的名字进行初始化

   大家可以分以下三步去实现

1.下载依赖

因为 Buttons 属于 JQuery DataTables 的扩展功能，所以我们在 常规 JS，CSS环境下，下载扩展 JS。 或者我们直接使用一个打包封装好的 JS，官网就有这样的功能。

资源下载 +　中文下载说明文档： http://datatables.club/extensions/buttons/
自定义打包下载链接： https://datatables.net/download/

我们此处只选择基础的就可以。（ 可以选择将扩展 合并和压缩 ）

<!--最后需要这四个文件就可以了，当然JQuery 也是必须的-->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.4.2/css/buttons.dataTables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.4.2/js/dataTables.buttons.min.js"></script>

2. 自定义按钮语法

//方法一： 直接定义按钮功能（二选一即可）
$('#myTable').DataTable( {
    ajax: '/api/data'
    buttons: [
            text: 'Reload',
            action: function ( e, dt, node, config ) {
                dt.ajax.reload();
//方法二： 先定义扩展，而后使用扩展（优点： 定义扩展后，可以一处定义，多处使用）
//1. 定义扩展
$.fn.dataTable.ext.buttons.reload = {
    text: 'Reload',
    action: function ( e, dt, node, config ) {
        dt.ajax.reload();
//2. 配置的时候使用扩展
$('#myTable').DataTable( {
    ajax: '/api/data',
    buttons: [
        'reload'
3. 参考实例
 
//实例代码
$.fn.dataTable.ext.buttons.alert = {
    className: 'buttons-alert',
    action: function ( e, dt, node, config ) {
        alert( this.text() );
$(document).ready(function() {
    $('#example').DataTable( {
        dom: 'Bfrtip',
        buttons: [
                extend: 'alert',
                text: 'My button 1'
                extend: 'alert',
                text: 'My button 2'
                extend: 'alert',
                text: 'My button 3'
Buttons 中文文档： http://datatables.club/extensions/buttons/
 
自定义按钮官网说明：https://datatables.net/extensions/buttons/custom
 
官网自定义按钮实例：https://datatables.net/extensions/buttons/examples/initialisation/plugins
				
datatable默认的分页按钮位置表头和表尾，但是在一些情况下需要自定义按钮位置，只需将datatable的属性绑定该元素的点击事件即可：
var table = $('#example').DataTable();
$('#next').on( 'click', function () {
    table.page( 'next' ).draw( 'page' );
    <button id="progress">正常</button>
    <button id="alerted">警告</button>
    <button id="closed">停机</button>
JS操事件
    $(function () {
        $('#p.
Select将项目选择功能添加到DataTable。 项目可以是行，列或单元格，可以独立选择，也可以一起选择。 项目选择在交互式表中特别有用，在交互式表中，用户可以在表上执行某些操作，例如编辑。
使用选择获取软件的主要方法是使用。 您还可以包括的各个文件。 有关完整的详细信息，请参见。
NPM和Bower
 如果您更喜欢使用NPM或Bower之类的程序包管理器，则可以使用从该存储库构建的软件提供的分发存储库，其名称为datatables.net-select 。 也可以通过在包名称后添加后缀来获得Bootstrap，Foundation和其他样式库的样式包。
 请参阅DataTables 和安装页面以获取更多信息。 还包含有关如何将软件包管理器与DataTables一起使用的详细信息。
使用DataTables构造函数中的select选项初始化Select-一个简单的
		text: '<i class="bx bxs-download" title="导出excel"></i>',
		extend: 'excel',
		title: 'XXX-XX详情信息表', //导出的excel标题
		// className: 'btn btn-primary' //按钮的class样式
正值 datart 图表插件开发作品大赛，借用 datart 开源社群里面超级优秀的大佬作品，给大家开个头，打个样，哈哈。
datart 自定义插件作品开的好头，让我们走出疫情、空难的阴霾，给美好的开码生活开个好头。
补充讲一下，datart 是一款数据可视化应用，是国内目前很火的一款开源工具，开源的，即免费。
数据可视化工具 datart 可以使用户能够接收有关运营和业务条件的大量动态信息。数据可视化允许决策者查看多维数据集之间的连接，并通过使用
				
<h3>回答1：</h3><br/>jQuery中的DataTables是一个非常强大的插件，它可以帮助我们快速地创建一个交互式的数据表格。使用DataTables，我们可以轻松地对数据进行排序、搜索、分页等操作，同时还可以自定义表格的样式和功能。
要使用DataTables，我们需要先引入jQuery和DataTables的相关文件，然后在HTML中创建一个表格，并在JavaScript中初始化DataTables。初始化时，我们需要指定表格的数据源、列的定义、以及一些其他的配置选项。
例如，下面是一个简单的示例：
HTML代码：
<table id="myTable">
  <thead>
      <th>ID</th>
      <th>Name</th>
      <th>Age</th>
  </thead>
  <tbody>
      <td>1</td>
      <td>John</td>
      <td>25</td>
      <td>2</td>
      <td>Jane</td>
      <td>30</td>
      <td>3</td>
      <td>Bob</td>
      <td>20</td>
  </tbody>
</table>
JavaScript代码：
$(document).ready(function() {
  $('#myTable').DataTable({
    "paging": true,
    "searching": true,
    "ordering": true,
    "info": true
在上面的代码中，我们使用了jQuery的ready()方法来确保页面加载完成后再执行初始化操作。然后，我们选择了ID为“myTable”的表格，并调用了DataTable()方法来初始化DataTables。在配置选项中，我们启用了分页、搜索、排序和信息显示等功能。
除了上面的基本用法外，DataTables还提供了许多其他的配置选项和API，可以根据具体的需求进行使用。总的来说，DataTables是一个非常实用的工具，可以帮助我们快速地创建出漂亮、交互式的数据表格。   
<h3>回答2：</h3><br/>jQuery DataTables是一个基于jQuery的表格插件，提供了一系列实用的表格交互功能和强大的数据查询功能。它可以快速、简单地将HTML表格转换为完整的、高度可定制的DataTable。
在使用jQuery DataTables时，需要首先引入jQuery、DataTables样式文件以及DataTables插件文件。然后，使用如下代码初始化DataTable：
```javascript
$(document).ready(function() {
    $('#example').DataTable();
其中，`'#example'`是表格的ID，可以根据实际情况进行修改。初始化完成后，DataTable会自动处理表格，并添加需要的额外功能，如排序、分页以及搜索等。
除此之外，DataTable还提供了许多其他的功能，如列过滤、行高亮、多语言支持、Ajax加载等。可以通过添加配置项进行设置，如：
```javascript
$(document).ready(function() {
    $('#example').DataTable({
        "paging": true, //开启分页
        "ordering": true, //开启排序
        "searching": true //开启搜索
DataTable还支持自定义插件，可以使用官方提供的插件，也可以开发自己的插件。自定义插件可以实现特定的功能，如显示隐藏列、编辑表格数据等。
总的来说，jQuery DataTables是一个非常实用的表格插件，提供了丰富的功能和灵活的扩展方式。使用DataTable可以大大提高开发效率，减少代码量，快速构建功能强大的数据表格。   
<h3>回答3：</h3><br/>DataTables是一个强大的jQuery表格插件，可以快速地将大量数据转换为交互式表格。该插件允许您添加排序，搜索和分页等高级功能，同时支持服务器端数据源。
使用DataTables只需要简单地在HTML文档中引用两个文件，分别是jquery.dataTables.min.css和jquery.dataTables.min.js，然后在页面DOM元素上调用datatables()方法即可初始化一个数据表。
在使用DataTables之前，需要先将要展示的数据格式化为一个二维数组。接着，可以通过列头对象来定义表格各列的展示形式，例如，可以为表格添加列头的显示文字，设置列数据的排序方式，定义列的宽度等。
在初始化表格时，需要指定一些选项来进一步自定义表格的展示形式。这些选项包括是否开启分页功能、每页显示多少数据、对哪些列开放搜索功能等等。
如果您的数据量比较大，可以使用DataTables提供的服务器端数据源，将数据请求发送到后端。这样可以提高数据加载速度，并且支持更加高级的数据操作，如多表关联数据查询、数据分片等等。
通过以上方式，我们可以轻松地创建一个功能强大的数据展示表格，并灵活地配置其展示形式和功能，从而满足各种业务场景的需求。