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 }); 24             }
        },
        error: function(xhr, status, msg) {
          layer.msg('玩命加載中..');
        }
      });