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('玩命加载中..');
        }
      });