Datatables表格插件，你用过吗？

Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。

分页，即时搜索和排序 几乎支持任何数据源：DOM， javascript， Ajax 和 服务器处理 支持不同主题 DataTables, jQuery UI, Bootstrap, Foundation 各式各样的扩展: Editor, TableTools, FixedColumns …… 丰富多样的option和强大的API 支持国际化 超过2900 个单元测试 免费开源 （ MIT license ）！ 商业支持 更多特性请到官网查看 英文官网地址 中文官网地址 点击导航栏 ->手册->安装 安装教程地址

下面给大家演示（这里我是下载到本地了，当然你也可以用云资源）

第一步(新建index.html并引入CSS、JS)

代码语言：javascript复制

//引入CSS
<!-- DataTables CSS -->
<link rel="stylesheet" type="text/css" href="/admin/datatables/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="/admin/js/jquery.js"></script>
<!-- DataTables -->
<script type="text/javascript" charset="utf8" src="/admin/datatables/jquery.dataTables.js"></script>

第二步

代码语言：javascript复制

<table  id="table_id_example">
   <thead>
      <tr>
          <th>ID</th>
          <th>文章标题</th>
          <th>加入时间</th>
          <th>操作</th>
      </tr>
   </thead>
</table>

第三步

代码语言：javascript复制

<script>
    var dataTable = $('#table_id_example').DataTable();//此处的**table_id_example**对应**第二步**的id="table_id_example"
</script>

来吧，展示。

下面我们来优化一下这个表格，分页方式有两种：

第一种客户端分页 （好处：服务器写代码少，简单，坏处：数据量大，有可能发送失败）

代码语言：javascript复制

<?php
$data = [
    ['id' => 1,'title' => '我是标题一','created_at' => '2020-07-02'],
    ['id' => 2,'title' => '我是标题二','created_at' => '2020-07-03'],
    ['id' => 3,'title' => '我是标题三','created_at' => '2020-07-04'],
    ['id' => 4,'title' => '我是标题四','created_at' => '2020-07-05'],
    ['id' => 5,'title' => '我是标题五','created_at' => '2020-07-06'],
    ['id' => 6,'title' => '我是标题六','created_at' => '2020-07-07'],
    ['id' => 7,'title' => '我是标题七','created_at' => '2020-07-08'],
    ['id' => 8,'title' => '我是标题八','created_at' => '2020-07-09'],
    ['id' => 9,'title' => '我是标题九','created_at' => '2020-07-10'],
    ['id' => 10,'title' => '我是标题十','created_at' => '2020-07-11'],
    ['id' => 11,'title' => '我是标题十一','created_at' => '2020-07-12'],
    ['id' => 12,'title' => '我是标题十二','created_at' => '2020-07-13'],
    ['id' => 13,'title' => '我是标题十三','created_at' => '2020-07-14']

];
?>
<table  id="table_id_example">
   <thead>
      <tr>
          <th>ID</th>
          <th>文章标题</th>
          <th>加入时间</th>
          <th>操作</th>
      </tr>
   </thead>
<?php foreach($data as $v):?>
     <tr>
        <th><?= $v['id']?></th>
        <th><?= $v['title']?></th>
        <th><?= $v['created_at']?></th>
        <th><a>修改</a>|<a>删除</a></th>
     </tr>
 <?php endforeach;?>
</table>
?>

到此，客户段分页已经完成，很简单。效果如下：

第二种服务端分页

首先需要开启服务段分页

代码语言：javascript复制

<table  id="table_id_example">
    <thead>
    <tr>
        <th>ID</th>
        <th>文章标题</th>
        <th>加入时间</th>
        <th>操作</th>
    </tr>
    </thead>
</table>

<script>
    var dataTable = $('#table_id_example').DataTable({
        "serverSide": true, //开启服务器端分页
        ajax: {//进行ajax请求
            url: 'ajax.php',
            type: 'get'
        },
        //显示每列
        columns: [
            // {data:'字段名称1','defaultContent':'默认值','className':'类名'}
            {data: 'id'},
            {data: 'title'},
            {data: 'created_at'},
            {data: 'action', 'defaultContent': '默认action','className':'action-default'}
        ]
    });
</script>

下面我们来自定义语言

代码语言：javascript复制

<script>
    var dataTable = $('#table_id_example').DataTable({
        ......
        "language": {
                "sLengthMenu": "每页显示 _MENU_ 条记录",
                "sZeroRecords": "对不起，没有匹配的数据",
                "sInfo": "第 _START_ - _END_ 条 / 共 _TOTAL_ 条数据",
                "sInfoEmpty": "没有匹配的数据",
                "sInfoFiltered": "(数据表中共 _MAX_ 条记录)",
                "sProcessing": "正在加载中...",
                "sSearch": "title搜索：",
                "oPaginate": {
                    "sFirst": "第一页",
                    "sPrevious": " 上一页 ",
                    "sNext": " 下一页 ",
                    "sLast": " 最后一页 "
                }
            }
            ......
    });
</script>

禁止某一列排序，我们操作这一列不需要有排序功能，所以可以禁止掉,索引是从0开始的。

代码语言：javascript复制

<script>
    var dataTable = $('#table_id_example').DataTable({
        ......
         columnDefs: [
            {targets: [3], orderable: false},//索引第3列禁止排序
        ],
        ......
    });
</script>

有些人喜欢自定义搜索隐藏自带搜索和自定义下拉分页书数，lengthMenu属性可以自定义下拉分页数，而searching属性可以控制是否用自带的搜索。这时候就有一个问题了，后台分页时如何知道你按多少数据分页的，你的排序方式是按哪个字段进行什么排序的。

代码语言：javascript复制

var dataTable = $('#table_id_example').DataTable({
            ......
            lengthMenu:[10,20,30, 50],//下拉的分页数
            searching:false,//隐藏搜索
            ......
        });

那自定义的搜索如何请求呢？需要自己去写一个form表单用于搜索提交数据。并且给form表单禁止submit提交。

在ajax请求中利用data属性动态实时获取用户输入的数据，并把其赋值给dataTable,然后doSearch方法中重新拉起一次dataTable请求，这时请求参数就添加了需要的字段和值;

代码语言：javascript复制

<form method="get" onsubmit="return doSearch();">
        <input  autocomplete="off" placeholder="输入想要搜索的标题" value="" id="title">
        <button>搜索标题</button>
</form>
<script>
    var dataTable = $('#table_id_example').DataTable({
        lengthMenu:[10,20,30, 50],//下拉的分页数
        searching:false,//隐藏搜索
        columnDefs: [
            {targets: [3], orderable: false},//索引第3列禁止排序
        ],
        "serverSide": true, //开启服务器端分页
        ajax: {//进行ajax请求
            url: 'ajax.php',
            type: 'get',
            //参数 动态获取表单数据用function
            data:function (ret) {
                ret.title = $.trim($('#title').val());//把title 放到请求参数里
            }
        },
        "language": {
            "sLengthMenu": "每页显示 _MENU_ 条记录",
            "sZeroRecords": "对不起，没有匹配的数据",
            "sInfo": "第 _START_ - _END_ 条 / 共 _TOTAL_ 条数据",
            "sInfoEmpty": "没有匹配的数据",
            "sInfoFiltered": "(数据表中共 _MAX_ 条记录)",
            "sProcessing": "正在加载中...",
            "sSearch": "title搜索：",
            "oPaginate": {
                "sFirst": "第一页",
                "sPrevious": " 上一页 ",
                "sNext": " 下一页 ",
                "sLast": " 最后一页 "
            }
        },
        //显示每列
        columns: [
            // {data:'字段名称1','defaultContent':'默认值','className':'类名'}
            {data: 'id'},
            {data: 'title'},
            {data: 'created_at'},
            {data: 'action', 'defaultContent': '默认action','className':'action-default'}
        ]
    });
    //搜索
    function doSearch() {
        dataTable.ajax.reload();//重新请求一次dataTable;
        return false;
    }
</script>

可以清楚的看到title 参数已经加上了。

下面我们来处理操作这一列，一般会有修改和删除两个按钮。这个也有两种方法去实现。第一种实现方法是前端处理,在 createdRow:function (row, data, dataIndex) {}回调方法中获取到当前所在行的最后一列，然后把html添加进去。

代码语言：javascript复制

<script>
    var dataTable = $('#table_id_example').DataTable({

        //回调方法row 当前行的dom data当前行的数据 dataIndex当前行的数据索引
        createdRow:function (row, data, dataIndex) {
        //行的最后一列 var let const
        var id = data.id;
        var td = $(row).find('td:last-child');
        //显示的html内容
        var html = `
                  <a href="/admin/article/${id}/edit">修改</a>
                  <a href="/admin/article/${id}"  onclick="return delArticle(this);">删除</a>
            `;//字符串模板
        //填充
        td.html(html);
       }
    });
    //搜索
    function doSearch() {
        //重新请求一次dataTable;
        dataTable.ajax.reload();
        return false;
    }
    function delArticle(obj) {
        let url = $(obj).attr('href');
        //ajax请求
        fetch(url, {
            method: 'delete',
            headers: {
                'X-CSRF-TOKEN': 'csrf_token()'
            }
    }).then(res => {
            return res.json();
        }).then(({status,msg}) => {
            if (status == 0) {
                layer.msg(msg, {time: 2000, icon: 1}, () => {
                    window.location.reload();
                });
            }
        });
        return false;
    }
</script>

第二种方法就以laravel为例子来举例说明。可以在模型中定义一个字段(我这里叫action)只要和你的colums:[{data:'action'}]对应就可以。使用laravel的模型属性和方法去实现。

代码语言：javascript复制

<?php

namespace AppModels;


class Article extends Base
{
    //追加一个字段
    protected $appends = ['action'];
    //访问器
    public function getActionAttribute()
    {
        return '<a href="route('admin.article.edit', $this->id)">修改</a>
                  <a href="route('admin.article.destroy',$this->id)">删除</a>';
    }
}

代码语言：javascript复制

  var dataTable = $('#table_id_example').DataTable({
     ......
     //显示每列
        columns: [
            // {data:'字段名称1','defaultContent':'默认值','className':'类名'}
            {data: 'id'},
            {data: 'title'},
            {data: 'created_at'},
            {data: 'action', 'defaultContent': '默认action','className':'action-default'}
        ]
     ......
});

laravel jquery

0 人点赞