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("<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 });
