DataTables 使用方法

DataTables是一款很简单，好用的前端框架。

绑定数据非常方便，下面是我对该框架的一些理解

一.获取所有得数据

table = $('#example').DataTable({
　　"ajax": '@Url.Action("GetAll", "Busines")',  //要显示得数据，返回格式为数组的数组
　　"order": [[0, "desc"]],   //排序 ，0为根据第一列来排序，desc为倒序
　　"language": {              //显示的语言
　　"lengthMenu": "每页 _MENU_ 条记录",
　　"zeroRecords": "没有找到记录",
　　"info": "第 _PAGE_ 页 ( 总共 _PAGES_ 页 )",
　　"infoEmpty": "无记录",
　　"infoFiltered": "(从 _MAX_ 条记录过滤)",
　　"paginate": {
　　"previous": "上一页",
　　"next": "下一页"
　　}
},

});    代码为：

table = $('#example').DataTable({
              "ajax": '@Url.Action("GetAll", "Busines")',//显示的数据,返回格式的数组的数组  
              "order": [[0, "desc"]], //排序，0为根据第一列来排序，desc为倒序
              "language": {           //显示的语言  
                  "lengthMenu": "每页 _MENU_ 条记录",
                  "zeroRecords": "没有找到记录",
                  "info": "第 _PAGE_ 页 ( 总共 _PAGES_ 页 )",
                  "infoEmpty": "无记录",
                  "infoFiltered": "(从 _MAX_ 条记录过滤)",
                  "paginate": {
                      "previous": "上一页",
                      "next": "下一页"
                  }
              },
        });

二.请求数据源，带参数：

   table = $("#mytable").DataTable({
            "ajax": {
                url: "/Order/GetOrderALL",
                type: "POST",
                data: { "state": state }
            },
            "language": {
                "lengthMenu": "每页 _MENU_ 条记录",
                "zeroRecords": "没有找到记录",
                "info": "第 _PAGE_ 页 ( 总共 _PAGES_ 页 )",
                "infoEmpty": "无记录",
                "infoFiltered": "(从 _MAX_ 条记录过滤)",
                "paginate": {
                    "previous": "上一页",
                    "next": "下一页"
                }
            },
        });

DataTables只能在页面加载完 后请求一次，不能频繁请求。

所以如果表格的数据要经常改变，我们可以在第一次请求的时候带上参数， ps： 使用这个参数查询指定的数据。

当要更新表格的数据时，只需要把参数变动，然后table.ajax.reolad()刷新就行了。

table.settings()[0].ajax.data.state =2;    //state为参数名，跟请求数据源时的参数名一样

三.DataTables折叠表格

有时候表格一行不够用，那我们就可以使用折叠表格，代码：

1.点击指定的按钮，显示折叠行

//点击查看详情   列里面的class为detalis点击的时候(我一般给第一列命名)
        $('.mytable').on('click', ' tbody td .detalis', function () {
            var tr = $(this).parents('tr');
            var row = table.row(tr);
            if (row.child.isShown())
            {
                //这一行已经打开,关闭它
                row.child.hide();
                tr.removeClass('shown');
            }
            else
            {
                //打开这一行
                //format()是一个方法，为获取折叠表格的内容。参数根据功能给
                row.child(format($(this).attr("orderid"))).show();
                    tr.addClass('shown');
            }
        });

2. 折叠行里面的内容。可以给固定的。 也可以去数据库里请求。拼接内容

//订单的 详细信息数据
    function format(e) {
        var dom = '<table class="ChildTable" border="1" style="padding-left:50px;">' +
            '<td>产品logo</td>' +
            '<td>商品</td>' +
            '<td>规格型号</td>' +
            '<td>数量</td>' +
            '<td>小计</td>' +
            '</tr >';

        var itmp = "";

        $.ajax({
            type: "post",
            url: "/Order/GetDetails",
            async: false,
            data: { "oid": e },
            success: function (ret) {
                for (var i = 0; i < ret.length; i++) {
                    itmp += '<tr>' +
                        '<td><img src="/' + ret[i].ProductImg + '"></td>' +
                        '<td>' + ret[i].ProductName + '</td>' +
                        '<td style="80px;">' + ret[i].Spec + '</td>' +
                        '<td style="80px;" >x' + ret[i].Quantity + '</td>' +
                        '<td style="80px;" >￥' + ret[i].Money + '</td>' +
                        '</tr >';
                }
                dom += itmp += '</table>';
            }
        });

        return dom;
    }

四。选中行，加背景

//选中行添加背景
$('#example tbody').on('click', 'tr', function () {
　　$("tr").removeClass("selected");
　　$(this).toggleClass('selected');

  console.log( table.row( this ).data() );  //输出选中行的值

});

五、监听页码(点击上一页，下一页，页码时的操作)

var table = $('#example').DataTable();
 
$('#example').on( 'page.dt', function () {
    var info = table.page.info();
    $('#pageInfo').html( 'Showing page: '+info.page+' of '+info.pages );
} );