1 var table = $('#example1').DataTable({
 2         "processing": true,//加載效果
 3         "autoWidth": false,
 4        "iDisplayLength": 25,//設置每頁要顯示的條數
 5         "lengthMenu": [[25, 50, 100], [25, 50, 100]],//設置每頁顯示條數的下來列表
 6          "serverSide": true,//從服務器調取數據源時設置為true
 7          "ajax":{
 8               "url":接口地址',
 9               "data":function(b){//傳參以此作為搜索條件
10                       b.taskId=$("#tId").val();
11                      b.state=$("#state").val();
12                   //    alert(b.positionId);
13                   },
14                "beforeSend":function(xhr){//加載loading
15                   var index = layer.load(1, {
16                       shade: [0.5,'#000'] //0.5透明度的黑色背景
17                     });
18               },
19               
20                "complete":function(xhr){//加載完成之后關閉loading
21                             layer.closeAll('loading');
22                         layer.msg('加載完成');
23                        
24                    }
25           },
26           "columns": [// columns 用來配置具體列的屬性
27               {"data":"aid","bSearchable":false,"visible":false},
28             {"data":  function ( row, type, set ) {//屬性方法可以自定義顯示方式
29                 return  "<a href='apkUpdate.html?aid=" + row.aid + "'>"+row.customName+"</a>";        
30             },"bSearchable":true},
31             {"data": "advertisersName","bSearchable":false},
32             {"data": "taskName","bSearchable":true},
33             {"data": function ( row, type, set ) {
34                 return "<a target=\"_blank\" href='apkIncomeList.html?aid=" + row.aid + "'> <span class=\"glyphicon glyphicon-usd\"></span></a>";    
35                 
36             },"bSearchable":true},
37             {"data": "limited","bSearchable":false},
38             {"data": function ( row, type, set ) {
39                 //處理時間戳
40                 return $.myTime.UnixToDate(row.startDate);          
41                     
42             } ,"bSearchable":false},
43             {"data": function ( row, type, set ) {
44                 //處理時間戳
45                 return $.myTime.UnixToDate(row.endDate); 
46                     
47             } ,"bSearchable":false},
48             {"data": "startTime","bSearchable":false},
49             {"data": "endTime","bSearchable":false},
50             {"data": function ( row, type, set ) {
51                 if(row.state==1){
52                     return "開";
53                 }else if(row.state==2){
54                     return "關";    
55                 }else{
56                     return "臨時";
57                     };
58                       
59                     
60             } ,"bSearchable":false},
61             {"data": function ( row, type, set ) {
62                     return "<a href=\""+row.apkUrl+"\" title=\""+row.apkUrl+"\"><span class=\"glyphicon glyphicon-download-alt\"></span></a>";
63                 } ,"bSearchable":false}
64           ],
65           "columnDefs": [//自定義列 columnDef s 屬性
66                  {
67                      "targets": [0,1,2,3,4,5,6,7,8,9,10,11],
68                        "orderable":false
69                    },
70                 
71             {
72               "targets": [12],
73               "data":"aid",
74               "render": function(data, type, full) {
75                 return "<a href='apkUpdate.html?aid=" + data + "'>修改</a>";
76               }
77             }
78           ],
79           "language": {//設置顯示的內容
80               'sSearch': '數據篩選:', 
81                  "lengthMenu": "每頁顯示 _MENU_ 項記錄",
82                 "zeroRecords": "沒有符合項件的數據...",
83                 "info": "當前頁數 _PAGE_ ，共有 _PAGES_頁",
84                 "infoEmpty": "顯示 0 至 0 共 0 項",
85                  "infoFiltered": ""
86         },
87         //在 dom 里面不配置 f ，可以隱藏掉默認的搜索框
88           "dom": '<"datatable-header"<"dataTables_filter">l><"datatable-scroll"t><"datatable-footer"ip>'
89           
90         });
91      $.fn.dataTable.ext.errMode = 'throw';//當出現問題時不彈出
92  
93 $('#apkBtn').bind('click',//自定義搜索框在按下回車鍵時搜索數據
94             function(e) {
95                 var pos=$("#apkInput").val();
96                 table.search(pos).draw();//搜索
97             });  

?通過ajax先加載數據之后初始化dataTable，與上面的區(qū)別就是，后初始化dataTable，排序和搜索都是客戶端處理。當然分頁需要自己寫了。

 1  $.ajax({
 2         url:"url",
 3         type: "GET",
 4         success: function(ret) {
 5           if (ret.CODE == "201") {
 6            var channelTaskLogModels = ret.data;
 7              
 8            for (var i = 0; i < channelTaskLogModels.length; i++) {
 9             $("#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>");
10           }
11               $('#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             }
25         },
26         error: function(xhr, status, msg) {
27           layer.msg('玩命加載中..');
28         }
29       });

?

轉載于:https://www.cnblogs.com/hyywaq/p/5919435.html

總結

以上是生活随笔為你收集整理的dataTable 从服务器获取数据源的两种表现形式的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。