Datatables使用笔记

项目代码部分展示

引入类库

jquery.dataTables.css和jquery.dataTables.js是datatables的基础样式和js.
如果页面需使用bootstrap的样式,则在引入jquery.datatables.js的同时还需引入对应的dataTables.bootstrap.js,但是样式只需要引入dataTables.bootstrap.css就行了

动态赋值条件查询

//表格初始化
function tableInit() {
    //测试数据data
    
    var option = {
        // data: data,
        paging: true,
        processing: true,
        lengthChange: false,
        pageLength: 5,
        searching: true,
        destroy: true,
        info: false,
        ordering: false,
        dom: "<'row'<'col-sm-12'tr>>" + "<'row'
  • <'col-sm-12'p>>", language: { "lengthMenu": "每页 _MENU_ 条,", "info": "共 _TOTAL_ 项。", "infoEmpty": "无记录", "infoFiltered": "(从 _MAX_ 条记录中筛选)", "zeroRecords": "对不起, 没有发现任何数据记录", "loadingRecords": "加载中...", "processing": "处理中...", "search": "搜索:", "paginate": { "first": "首页", "last": "尾页", "next": "下一页", "previous": "上一页" }, }, showRowNumber: true, serverSide: true, ajax: { url: API.comment.getCommentList, type: 'POST', // dataSrc: "rows", // data: function(d) { // } data: { "sortType": 0 } }, columns: [{ data: "phone" }, { data: "realname" }, { data: "itemName" }, { data: "type" }, { data: "employeeName" }, { data: "star" }, { data: "image" }, { data: "time" }], order: [ [0, null] ], columnDefs: [{ targets: 0, data: 'phone', width: '10%', orderable: false }, { targets: 1, data: 'realname', width: '10%', orderable: false }, { targets: 2, data: 'itemName', width: '10%', orderable: false }, { targets: 3, data: 'type', width: '10%', orderable: false, render: function(data, type, row, meta) { var str = ""; if (row.type == "0") { str = "服务评价"; } if (row.type == "1") { str = "商品评价"; } return str; } }, { targets: 4, data: 'employeeName', width: '10%', orderable: false }, { targets: 5, data: 'star', width: '20%', orderable: false, render: function(data, type, row, meta) { var str = ''; var levelLen = parseInt(row.star); for (var i = 0; i < levelLen && i < 5; i++) { str += ''; } return str != '' ? str : '暂无'; } }, { targets: 6, data: 'image', width: '10%', orderable: false, render: function(data, type, row, meta) { var str = ""; // console.log(row.image.length); if (row.image.length>0) { str = ''; } // if (row.image == "false") { // str = '无'; // } return str; } }, { targets: 7, data: 'time', width: '20%', orderable: false, render: function(data, type, row, meta) { var str = BS.dateFormatter(row.time, 'yyyy.MM.dd'); return str; } }], initComplete: function(setting, json) { //如果使用ajax选项来获取数据,则得到服务器返回的数据,否则是 undefined //console.log(json); }, drawCallback: function() { //单选按钮样式 // $('input[type="checkbox"],input[type="radio"]').iCheck({ // checkboxClass: 'icheckbox_square-blue', // radioClass: 'iradio_square-blue', // increaseArea: '20%' // }); } }; var _tableObj=$("#tab").DataTable(option); return _tableObj; } //初始化表格 var oTable = tableInit(); //点击查询按钮 $('#evaluateBtn').on('click', function() { // var _url=API.reservation.getReservationList; // var param = { // "mobile": $('#evaluateTel').val(), // "star": $('#evaluateLevel').val(), // "sortType": 0 // }; var param = { "sortType": "" }; if ($('#evaluateOrder').val() == "evaluateTimeOrder") { param.sortType = "0" } if ($('#evaluateOrder').val() == "evaluateLevelOrder") { param.sortType = "1" } if ($('#evaluateTel').val() != '' && $('#evaluateTel').val() != null) { param.mobile = $('#evaluateTel').val(); } if ($('#evaluateLevel').val() != '' && $('#evaluateLevel').val() != null) { param.star = $('#evaluateLevel').val(); } oTable.settings()[0].ajax.data = param; oTable.ajax.reload(); })
  • 表格重新绘制及客户端及服务器端序号显示

      //点击tab切换后重新绘制百分比表格
    datatable.columns.adjust().draw();
    //客户端前台页面添加序号
    //datatable.on('order.dt search.dt',
    //function () {
    //    datatable.column(0, {
    //        "search": 'applied',
    //        "order": 'applied'
    //    }).nodes().each(function (cell, i) {
    //        cell.innerHTML = i + 1;
    //    });
    //}).draw();
    //服务器端分页实现表格索引号
    datatable.on('draw.dt', function () {
        datatable.column(0, {
            search: 'applied',
            order: 'applied'
        }).nodes().each(function (cell, i) {
            //i 从0开始,所以这里先加1
            i = i + 1;
            //服务器模式下获取分页信息,使用 DT 提供的 API 直接获取分页信息
            var page = datatable.page.info();
            //当前第几页,从0开始
            var pageno = page.page;
            //每页数据
            var length = page.length;
            //行号等于 页数*每页数据长度+行号
            var columnIndex = (i + pageno * length);
            cell.innerHTML = columnIndex;
        });
    });
    

    当需要在ajax中设置媒体请求类型的时候需要严格按照datatable传参的格式来

    以json格式提交
    $('#tab').DataTable({
            ajax:{
                url: apiPathBase + 'Menu/GetChildrenAsync',
                type: 'post',
                contentType: "application/json; charset=utf-8",
                data: function(d) {
                    d.id = 'root';
                    return JSON.stringify(d);
                }
            }
        })
    

    动态传递参数
    function subMenuDataInitialize(event, treeId, treeNode) {
    $('#panel-subMenu .panel-heading strong').text(treeNode.title);
    $('#modalEdit-parentName').val(treeNode.title);
    $('#modalEdit-parentCode').val(treeNode.id);
    var param = {
    id: treeNode.id
    }
    dataTable.settings()[0].ajax.data = function(d) {
    d.id = treeNode.id;
    return JSON.stringify(d);
    }
    dataTable.ajax.reload();
    // dataTable.ajax.url(apiPathBase + '/Menu/SubMenus?id=' + treeNode.id).load();
    }

    DataTables的异步数据处理参考链接Ajax.data

    你可能感兴趣的:(Datatables使用笔记)