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

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

 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,与上面的区别就是,后初始化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("><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

更多相关: