dataTable插件的使用 | Wukong's Blog

偶然发现一个叫 dataTable 的组件，觉得很好用，于是研究了一番，下面是代码

var lang = {  
  "sProcessing": "处理中...",  
  "sLengthMenu": "每页 _MENU_ 项",  
  "sZeroRecords": "没有匹配结果",  
  "sInfo": "当前显示第 _START_ 至 _END_ 项，共 _TOTAL_ 项。",  
  "sInfoEmpty": "当前显示第 0 至 0 项，共 0 项",  
  "sInfoFiltered": "(由 _MAX_ 项结果过滤)",  
  "sInfoPostFix": "",  
  "sSearch": "搜索:",  
  "sUrl": "",  
  "sEmptyTable": "表中数据为空",  
  "sLoadingRecords": "载入中...",  
  "sInfoThousands": ",",  
  "oPaginate": {  
    "sFirst": "首页",  
    "sPrevious": "上页",  
    "sNext": "下页",  
    "sLast": "末页",  
    "sJump": "跳转"  
  },  
 "oAria": {  
    "sSortAscending": ": 以升序排列此列",  
    "sSortDescending": ": 以降序排列此列"  
  }  
};  

var table = $("#sample").dataTable({  
  language:lang,  //提示信息  
  autoWidth: false,  //禁用自动调整列宽  
  processing: true,  //隐藏加载提示,自行处理  
  serverSide: true,  //启用服务器端分页  
  searching: true,  //禁用原生搜索  
  search: {  
    "search": ""  
  },  
  ordering:false,  
  renderer: "bootstrap",  //渲染样式：Bootstrap和jquery-ui  
  lengthChange: false,  
  pageLength:15,  
  rowId: '_id',  
  pagingType: "simple_numbers",  //分页样式：simple,simple_numbers,full,full_numbers  
  columnDefs: [{  
    "targets": 'nosort',  //列的样式名  
    "orderable": false    //包含上样式名‘nosort’的禁止排序  
  }],  
  ajax: function (data, callback, settings) {  
    //封装请求参数  
    var param = {};  
    param.keyword = data.search.value;  
    param.limit = data.length;//页面显示记录条数，在页面显示每页显示多少项的时候  
    param.start = data.start;//开始的记录序号  
    param.page = (data.start / data.length)+1;//当前页码  
    //console.log(param);  
    //ajax请求数据  
    $.ajax({  
      type: "POST",  
      url: "/payment/result",  
      cache: false,  //禁用缓存  
      data: param,  //传入组装的参数  
      dataType: "json",  
      success: function (result) {  

        //封装返回数据  
        var returnData = {};  
        returnData.draw = data.draw;//这里直接自行返回了draw计数器,应该由后台返回  
        returnData.recordsTotal = result.totalCount;//返回数据全部记录  
        returnData.recordsFiltered = result.totalCount;//后台不实现过滤功能，每次查询均视作全部结果  
        returnData.data = result.payment;//返回的数据列表  
        //调用DataTables提供的callback方法，代表数据已封装完成并传回DataTables进行渲染  
        //此时的数据需确保正确无误，异常判断应在执行此回调前自行处理完毕  
        callback(returnData);  
      }  
    });  
  },  
  //列表表头字段  
  columns: [   
    {    
      className: "center",    
      orderable : false,    
      bSortable : false,    
      data : "_id",    
      render : function(data, type, row, meta) {    
        var content = '<label class="position-relative">';    
        content += '<input type="checkbox" class="ace" value="' + data + '" />';    
        content += '<span class="lbl"></span>';    
        content += '</label>';    
        return content;    
      }       
    },    
    {   
      "data": "type",  
      render:function(date,type,full) {  
        var content = null;  
        if(date == 1) {  
          content = '收入';  
        } else {  
          content = '支出';  
        }  
        return content;  
      }  
    },  
    { "data": "name" },  
    { "data": "price" },  
    { "data": "product_type" },  
    { "data": "meta.createAt",  
      render:function(date,type,full) {  
      return date.slice(0,10);  
      }  
    },  
    {   
      bSortable : false,    
      visible : true,   
      data : "_id",       
      render : function(data, type, full) {    
        var content = '<div class="hidden-sm hidden-xs action-buttons">'+  
        '<a href="/payment/detail/' + data + '" class="blue">'+  
        '<i class="ace-icon fa fa-search-plus bigger-130"></i>'+  
        ' </a>'+  
        '<a href="javascript:void(0);" data-id="' + data + '" class="delete_btn red">'+  
        '<i class="ace-icon fa fa-trash-o bigger-130"></i>'+  
        '</a>'+  
        '</div>'+  
        '<div class="hidden-md hidden-lg">'+  
        '  <div class="inline position-relative">'+  
        '    <button data-toggle="dropdown" data-position="auto" class="btn btn-minier btn-yellow dropdown-toggle"><i class="ace-icon fa fa-caret-down icon-only bigger-120"></i></button>'+  
        '<ul class="dropdown-menu dropdown-only-icon dropdown-yellow dropdown-menu-right dropdown-caret dropdown-close">'+  
        ' <li><a href="/payment/detail/' + data + '" data-rel="tooltip" title="" data-original-title="View" class="tooltip-info"><span class="blue"><i class="ace-icon fa fa-search-plus bigger-120"></i></span></a>'+  
        '<li><a data-rel="tooltip" title="" data-original-title="Delete" data-id="' + data + '" class="delete_btn tooltip-error"><span class="red"><i class="ace-icon fa fa-trash-o bigger-120"></i></span></a></li>'+  
        '</ul></div></div>';  

        return content;    
      }     
    }   
  ]  
  }).api();  
  //此处需调用api()方法,否则返回的是JQuery对象而不是DataTables的API对象  
});