Datatables表格插件，你用过吗？

友儿

发布于 2022-09-11 12:45:37

5.9K0

发布于 2022-09-11 12:45:37

文章被收录于专栏：友儿友儿

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

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

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

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

//引入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>

第二步

<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();//此处的**table_id_example**对应**第二步**的id="table_id_example"
</script>

来吧，展示。

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

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

<?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>
?>

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

第二种服务端分页

首先需要开启服务段分页

<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>

下面我们来自定义语言

<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开始的。

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

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

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

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

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

<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添加进去。

<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的模型属性和方法去实现。

<?php

namespace App\Models;


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>';
    }
}

  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'}
        ]
     ......
});

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

laravel

jquery

本文分享自作者个人站点/博客前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

laravel

jquery

登录后参与评论

0 条评论

热度