DataTables 入门

不忘初心的个人博客 / 8389 / 9 / 创建于 6年前 / 更新于 4年前

DataTables 入门

先看一下效果

GITHUB:https://github.com/DataTables/DataTables

引入 CSS 和 JS

 <!-- Datatables -->
    <link href="/vendors/datatables.net-bs/css/dataTables.bootstrap.min.css" rel="stylesheet">
    <link href="/vendors/datatables.net-buttons-bs/css/buttons.bootstrap.min.css" rel="stylesheet">
    <link href="/vendors/datatables.net-fixedheader-bs/css/fixedHeader.bootstrap.min.css" rel="stylesheet">
    <link href="/vendors/datatables.net-responsive-bs/css/responsive.bootstrap.min.css" rel="stylesheet">
    <link href="/vendors/datatables.net-scroller-bs/css/scroller.bootstrap.min.css" rel="stylesheet">

 <!-- Datatables -->
    <script src="/vendors/datatables.net/js/jquery.dataTables.min.js"></script>
    <script src="/vendors/datatables.net-bs/js/dataTables.bootstrap.min.js"></script>
    <script src="/vendors/datatables.net-buttons/js/dataTables.buttons.min.js"></script>
    <script src="/vendors/datatables.net-buttons-bs/js/buttons.bootstrap.min.js"></script>
    <script src="/vendors/datatables.net-buttons/js/buttons.flash.min.js"></script>
    <script src="/vendors/datatables.net-buttons/js/buttons.html5.min.js"></script>
    <script src="/vendors/datatables.net-buttons/js/buttons.print.min.js"></script>
    <script src="/vendors/datatables.net-fixedheader/js/dataTables.fixedHeader.min.js"></script>
    <script src="/vendors/datatables.net-keytable/js/dataTables.keyTable.min.js"></script>
    <script src="/vendors/datatables.net-responsive/js/dataTables.responsive.min.js"></script>
    <script src="/vendors/datatables.net-responsive-bs/js/responsive.bootstrap.js"></script>
    <script src="/vendors/datatables.net-scroller/js/dataTables.scroller.min.js"></script>
    <script src="/vendors/jszip/dist/jszip.min.js"></script>
    <script src="/vendors/pdfmake/build/pdfmake.min.js"></script>
    <script src="/vendors/pdfmake/build/vfs_fonts.js"></script>

<table id="datatable_list" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">

我们为了方便修改datatables的属性所以我们单独定义出来

 $.dataTablesSettings = {
            "dom": "Bfrtip",
            "bAutoWidth": false,
            "bDeferRender": true,
            "bLengthChange": true,
            "bPaginate": true,
            "bServerSide": true,
            "bSort": true,
            "buttons": [ //这个是她带给你的一些功能按键... 
                {
                    "extend": "copy",
                    "className": "btn-sm"
                },
                {
                    "extend": "csv",
                    "className": "btn-sm"
                },
                {
                    "extend": "excel",
                    "className": "btn-sm"
                },
                {
                    "extend": "pdfHtml5",
                    "className": "btn-sm"
                },
                {
                    "extend": "print",
                    "className": "btn-sm"
                },
                {
                    "extend": "pdf",
                    "className": "btn-sm"
                }
            ],
            "searching": false, //默认搜索框
            "ordering": true,
            "responsive": true,
            "paginate": true,
            "processing": true,
            "serverSide": true,
            "ajax": "https://后端接口的地址",
            "dataSrc": 'data',
            "aaSorting": [[0, 'desc']], //根据 columns 字段的 键位 0 , desc 倒序
            "pageLength": 50, //分页数量
            "stateSave": false,
            "columns": [ //字段列们
                {
                    "title": "ID", "data": "id", 'name': 'id' 
                },
                {
                    "title": "时间",  //标题
                    "data": "created_at",   //服务端数据
                    'name': 'created_at',   //别名
                    "render": function (data, type, row) { //如果有需求对返回数据的处理
                        if (data === undefined) { //如果是 undefined -,- 不介绍
                            return '未知';    //返回想展示出来的文字
                        }
                            //可以对(data)做你想做的事情 ......

                        return data;  //返回她
                    }
                },
                {
                  "title": "操作", 
                  "data": 'id', 
                  'name': 'operation', 
                  "render": function (data, type, row) {
                    return "<a href='详情页地址" + data + "'>查看详情</a>";
                }
            ],
            "language": { //自定义描述....
                "sProcessing": "正在获取数据, 请稍后...",
                "sLengthMenu": "显示 _MEUN_ 条",
                "sZeroRecords": "没有找到数据",
                "sInfo": "从 _START_ 到 _END_ 条记录 总记录数为 _TOTAL_ 条",
                "sInfoEmpty": "记录数为0",
                "sInfoFiltered": "(全部记录数 _MAX_ 条)",
                "sInfoPostFix": "",
                "sSearch": "全局搜索",
                "sUry": "",
                "oPaginate": {
                    "sFirst": "第一页",
                    "sPrevious": "上一页",
                    "sNext": "下一页",
                    "sLast": "最后一页"
                },
                "loadingRecords": "Please wait - loading...",
                "processing": "DataTables is currently busy",
                "search": "Apply filter _INPUT_ to table"
            },
            "fnServerParams": function (aoData) { //这个里面的 aoData就是会发送到后端的数据
              //在这里 你可以对 发送到后端之前做任何事情. 
                aoData._rand = Math.random();
            },
            "fnDrawCallback": function () {

            }
        };

如果我们想更改分页数的显示

 //分页数设置
        $('.pages_num').click(function () {
           //修改 pageLength 的值
            $.dataTablesSettings.pageLength = $(this).attr('describe');
           //$(this).attr('describe') 等于 你想要设置的每页展示条数

            dataTable.fnDestroy(false); //我们要重建它
            dataTable = $("#datatable_list").dataTable($.dataTablesSettings);
        });

//至于页码什么的前端都搞好了不用再管啦....

自定义搜索

//$.dataTablesSettings.fnServerParams 我们在发送之前可以做任何事情
$.dataTablesSettings.fnServerParams = function (aoData) {
  //aoData 在介绍一遍 这个是发送之前的数据

                aoData._rand = Math.random();

                //虽然里面有 search 这个数据 但是发现不给她 赋值成空的 [] 才能 push
                aoData.search = [];

                aoData.search.push(
                    //自定义搜索
                    {
                        "name": "search_input",
                        "value": $('#search_input').val(),
                        "regex": false
                      //里面可以在加一些你想要的 键值对
                    },
                    //开始时间
                    {
                        "name": "search_start_time",
                        "value": $('input[name=daterangepicker_start]').val(),
                        "regex": false
                    },
                    //结束时间
                    {
                        "name": "search_end_time",
                        "value": $('input[name=daterangepicker_end]').val(),
                        "regex": false
                    }
                );
            };

            //搜索就是设置参数，然后销毁datatable重新再建一个
            dataTable.fnDestroy(false);
            dataTable = $("#datatable_list").dataTable($.dataTablesSettings);
            //搜索后跳转到第一页 这个基本上不用 应为 默认就是会 回到第一页的....
            //dataTable.fnPageChange(0);

请求到后台的数据

draw:0
columns[0][data]:id
columns[0][name]:id
columns[0][searchable]:true
columns[0][orderable]:true
columns[0][search][value]:
columns[0][search][regex]:false
columns[1][data]:created_at
columns[1][name]:created_at
columns[1][searchable]:true
columns[1][orderable]:true
columns[1][search][value]:
columns[1][search][regex]:false
order[0][column]:0
order[0][dir]:desc
start:0
length:50
search[0][name]:search_input
search[0][value]:
search[0][regex]:false
search[1][name]:search_start_time
search[1][value]:2017-08-24 10:06:08
search[1][regex]:false
search[2][name]:search_end_time
search[2][value]:2017-09-22 10:06:08
search[2][regex]:false
search[3][name]:search_module_rule_const
search[3][value]:
search[3][regex]:false
search[4][name]:search_pay_states
search[4][value]:
search[4][regex]:false
search[5][name]:serch_monery
search[5][value]:0;100000000
search[5][regex]:false
_rand:0.5223628085815641
_:1506045968347

后台返回数据

{
    "draw":"1",
    "recordsTotal":65,
    "recordsFiltered":65,
    "data":[
        {
            "id":91679,
            "created_at":"2017-08-28 10:25:07"
            }
        }
    ]
}

附赠一个时间控件的操作 daterangepicker

GITHUB:https://github.com/sensortower/daterangepi...

 <!-- bootstrap-daterangepicker -->
    <link href="/vendors/bootstrap-daterangepicker/daterangepicker.css" rel="stylesheet">
    <!-- bootstrap-datetimepicker -->
    <link href="/vendors/bootstrap-datetimepicker/build/css/bootstrap-datetimepicker.css" rel="stylesheet">

 <!-- bootstrap-daterangepicker -->
    <script src="/vendors/moment/min/moment.min.js"></script>
    <script src="/vendors/bootstrap-daterangepicker/daterangepicker.js"></script>
    <!-- bootstrap-datetimepicker -->
    <script src="/vendors/bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min.js"></script>

 //时间搜索框
        $('#search_time').daterangepicker({
            timePicker: true,
            timePickerIncrement: 5,
            showDropdowns: true,
            showWeekNumbers: true,
            timePicker24Hour: true,
            format: 'YYYY-MM-DD HH:mm:ss',
            language: 'CN',
            ranges: { 
                '今天': [moment(), moment()],
                '昨天': [moment().subtract(1, 'days'), moment().subtract(1, 'days')],
                '7天前': [moment().subtract(6, 'days'), moment()],
                '30天前': [moment().subtract(29, 'days'), moment()],
                '这个月': [moment().startOf('month'), moment().endOf('month')],
                '上个月': [moment().subtract(1, 'month').startOf('month'), moment().subtract(1, 'month').endOf('month')]
            },
            opens: 'left',
            buttonClasses: ['btn btn-default'],
            applyClass: 'btn-small btn-primary',
            cancelClass: 'btn-small',
            alwaysShowCalendars: true,
            locale: {
                applyLabel: '确认',
                cancelLabel: '清除',
                format: 'YYYY-MM-DD HH:mm:ss',
                toLabel: 'To',
                separator: ' 至 ',
                customRangeLabel: '自定义',
                daysOfWeek: ['日', '一', '二', '三', '四', '五', '六'],
                monthNames: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                firstDay: 1
            }
        });

datatables