dataTable 从服务器获取数据源的两种表现形式

 var table = $('#example1').DataTable({
         "processing": true,//加载效果
         "autoWidth": false,
        "iDisplayLength": 25,//设置每页要显示的条数
         "lengthMenu": [[25, 50, 100], [25, 50, 100]],//设置每页显示条数的下来列表
          "serverSide": true,//从服务器调取数据源时设置为true
          "ajax":{
               "url":接口地址',
               "data":function(b){//传参以此作为搜索条件
                       b.taskId=$("#tId").val();
                      b.state=$("#state").val();
                   //    alert(b.positionId);
                   },
                "beforeSend":function(xhr){//加载loading
                   var index = layer.load(1, {
                       shade: [0.5,'#000'] //0.5透明度的黑色背景
                     });
               },

                "complete":function(xhr){//加载完成之后关闭loading
                             layer.closeAll('loading');
                         layer.msg('加载完成');

                    }
           },
           "columns": [// columns 用来配置具体列的属性
               {"data":"aid","bSearchable":false,"visible":false},
             {"data":  function ( row, type, set ) {//属性方法可以自定义显示方式
                 return  "<a href='apkUpdate.html?aid=" + row.aid + "'>"+row.customName+"</a>";
             },"bSearchable":true},
             {"data": "advertisersName","bSearchable":false},
             {"data": "taskName","bSearchable":true},
             {"data": function ( row, type, set ) {
                 return "<a target=\"_blank\" href='apkIncomeList.html?aid=" + row.aid + "'> <span class=\"glyphicon glyphicon-usd\"></span></a>";    

             },"bSearchable":true},
             {"data": "limited","bSearchable":false},
             {"data": function ( row, type, set ) {
                 //处理时间戳
                 return $.myTime.UnixToDate(row.startDate);          

             } ,"bSearchable":false},
             {"data": function ( row, type, set ) {
                 //处理时间戳
                 return $.myTime.UnixToDate(row.endDate); 

             } ,"bSearchable":false},
             {"data": "startTime","bSearchable":false},
             {"data": "endTime","bSearchable":false},
             {"data": function ( row, type, set ) {
                 if(row.state==1){
                     return "开";
                 }else if(row.state==2){
                     return "关";
                 }else{
                     return "临时";
                     };

             } ,"bSearchable":false},
             {"data": function ( row, type, set ) {
                     return "<a href=\""+row.apkUrl+"\" title=\""+row.apkUrl+"\"><span class=\"glyphicon glyphicon-download-alt\"></span></a>";
                 } ,"bSearchable":false}
           ],
           "columnDefs": [//自定义列 columnDef s 属性
                  {
                      "targets": [0,1,2,3,4,5,6,7,8,9,10,11],
                        "orderable":false
                    },

             {
               "targets": [12],
               "data":"aid",
               "render": function(data, type, full) {
                 return "<a href='apkUpdate.html?aid=" + data + "'>修改</a>";
               }
             }
           ],
           "language": {//设置显示的内容
               'sSearch': '数据筛选:',
                  "lengthMenu": "每页显示 _MENU_ 项记录",
                 "zeroRecords": "没有符合项件的数据...",
                 "info": "当前页数 _PAGE_ ，共有 _PAGES_页",
                 "infoEmpty": "显示 0 至 0 共 0 项",
                  "infoFiltered": ""
         },
         //在 dom 里面不配置 f ，可以隐藏掉默认的搜索框
           "dom": '<"datatable-header"<"dataTables_filter">l><"datatable-scroll"t><"datatable-footer"ip>'

         });
      $.fn.dataTable.ext.errMode = 'throw';//当出现问题时不弹出

 $('#apkBtn').bind('click',//自定义搜索框在按下回车键时搜索数据
             function(e) {
                 var pos=$("#apkInput").val();
                 table.search(pos).draw();//搜索
             });  

   

通过ajax先加载数据之后初始化dataTable，与上面的区别就是，后初始化dataTable，排序和搜索都是客户端处理。当然分页需要自己写了。

  $.ajax({
         url:"url",
         type: "GET",
         success: function(ret) {
           if (ret.CODE == "201") {
            var channelTaskLogModels = ret.data;

            for (var i = 0; i < channelTaskLogModels.length; i++) {
             $("#example1").append("<tr><td>" + channelTaskLogModels[i].appName + "</td><td>" + channelTaskLogModels[i].points + "</td><td>" + $.myTime.UnixToDate(channelTaskLogModels[i].createTime) + "</td><td><span class='channel'>" + channelTaskLogModels[i].address + "</span></td></tr>");
           }
               $('#example1').dataTable({
12                 "iDisplayLength": 25,
13                 "lengthMenu": [[25, 50, 100], [25, 50, 100]],
14                 "paging":false,
15                 "language": {
16                   'sSearch': '数据筛选:',
17                   "lengthMenu": "每页显示 _MENU_ 项记录",
18                   "zeroRecords": "没有符合项件的数据...",
19                   "info": "当前页数 _PAGE_ ，共有 _PAGES_页",
20                   "infoEmpty": "显示 0 至 0 共 0 项",
21                   "infoFiltered": "111"
22                 },
23               });
             }
         },
         error: function(xhr, status, msg) {
           layer.msg('玩命加载中..');
         }
       });