dataTable插件的使用

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211

var table;                      table = $("#example").dataTable({                          "sDom": "<'top'f<'clear'>>t<'bottom'ilpr<'clear'>>",<br>　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　"deferLoading": 10,首次不请求接口的初始化表格                          "bRetrieve": true,      //用于指明当履行dataTable绑按时，是否返回DataTable对象                          "bProcessing": true,    //以指定当正在处理惩罚数据的时辰，是否显示“正在处理惩罚”这个提示信息                          "bServerSide": true,   //通过服务端来取数据,是否阻止分页                          "bAutoWidth": true,     //是否主动策画表格各列宽度   false                          "ordering":false,       //禁用排序去掉图标                          "bFilter": false,       //是否启用客户端过滤功能                          "sort": "position",                          "aaSorting": [         //指定按多列数据排序的根据                              [0, "desc"]                          ],                          "bStateSave": false,    //是否打开客户端状况记录功能                          "iDisplayLength": 10,   //用于指定一屏显示的条数，需开启分页器                          "iDisplayStart": 0,    //用于指定从哪一条数据开端显示到表格中去                          "dom": "Bfrtip",                          "fnServerParams": function(aoData) {                              aoData.push({                                  "name": "gameId",    //游戏id                                  "value": $('#gameId').val()                              }, {                                  "name": "name",    //姓名                                  "value": $('#name').val()                              }, {                                  "name": "tel",    //电话                                  "value": $('#tel').val()                              },  {                                  "name": "startDate",                                  "value":$("#startDate").val()                              },{                                 "name":"endDate",                                 "value":$("#endDate").val()                              },                              {                                  "name": "cityCode",                                  "value": $('#cityCode').val()                              }, {                                  "name": "districtCode",                                  "value": $('#districtCode').val()                              },{                                  "name":"provinceCode",                                  "value":$("#provinceCode").val()                              });                            },                          "fnDrawCallback": function(oSettings) {                              var api = this.api();                              var startIndex= api.context[0]._iDisplayStart;//获取到本页开始的条数                              api.column(0).nodes().each(function(cell, i) {                                  cell.innerHTML = startIndex + i + 1;                              });                                $("tr").parents("tbody").children(":last-child").children(":nth-child(6)").children().addClass("hoves")                             $("tr").parents("tbody").children(":nth-child(9)").children(":nth-child(6)").children().addClass("hoves")                             $("tr").parents("tbody").children(":last-child").children(":nth-child(7)").children().addClass("hoves")                             $("tr").parents("tbody").children(":nth-child(9)").children(":nth-child(7)").children().addClass("hoves")                             $(".experience1").unbind('hover').hover(function(){                                 $(this).next().toggle();                             }).unbind('hover'),                             $(".origin1").unbind('hover').hover(function(){                                 $(this).next().toggle();                             }).unbind('hover')                                  },   //draw画 ，这个应该是重绘的回调函数                          "sAjaxSource": "${base}/joinBusiness/getPartnerList?stage=1",      //请求地址                         // "sAjaxSource": "http://172.16.81.36/operate/joinBusiness/getPartnerList",      //请求地址                          "sServerMethod":"POST",                          "sScrollX": "100%",      //是否开启程度迁移转变，以及指定迁移转变区域大小                          "bScrollCollapse": true,    //指定恰当的时辰缩起迁移转变视图                          "aoColumns": [{             //数据表列值                              "mDataProp": "",                              "orderable": false, // 禁用排序                              "sDefaultContent": "",                              "bSortable": false,                              "aTargets": [0]                          }, {                              "mDataProp": "name",                              "sDefaultContent": "",                              "bSortable": false,                              "aTargets": [1]                          }, {                              "mDataProp": "tel",                              "sDefaultContent": "",                              "bSortable": false,                              "aTargets": [2]                          }, {                              "mDataProp": "wechat",                              "sDefaultContent": "",                              "bSortable": false,                              "aTargets": [3]                          }, {                              "mDataProp": "",     //合作区域                              "sDefaultContent": "",                              "mRender": function(data,type,full){                                  var provinceName = full.provinceName!=null?full.provinceName:'';                                  var cityName = full.cityName!=null?full.cityName:'';                                  var districtName = full.districtName!=null?full.districtName:'';                                  var str;                                  str="<div><p>"+provinceName+"</p><p>"+cityName+"</p><p>"+districtName+"</p></div>";                                  return str;                                },                              "bSortable": false,                              "aTargets": [4]                          }, {                              "mDataProp": "experience",                              "sDefaultContent": "",                              "bSortable": false,                              "mRender": function(data,type,full){                                 if(full.experience!=null){                                      var str = full.experience;                                      var strs = [];                                      var s=0;                                      var length=0;                                      var flag=0;                                      var domTd='';                                      for(var i=0;i<str.length;i++){                                          s++;                                          if(/[\u4e00-\u9fa5]/.test(str.charAt(i))){                                              s++;                                          }                                      }                                      for(var i=0;i<str.length;i++){                                          flag++;                                          if(/[\u4e00-\u9fa5]/.test(str.charAt(i))){                                              flag++;                                          }                                          if(flag>30){                                              break;                                          }                                          length++;                                      }                                        if(s>30){                                         str=str.substr(0,length);                                         var times = Math.ceil(str.length/7);                                         for(var i=0;i<times;i++){                                             strs.push(str.slice(i*7,(i+1)*7));                                         }                                         domTd='<p tabindex="0" class="experience experience1"  role="button" data-toggle="popover" data-trigger="focus" data-content="And heres some amazing content  Its very engaging Right?">'+strs.join("</br>")+'...</p><div>'+full.experience+'</div>'                                      }else{                                          domTd='<p class="experience experience1" >'+str+'</p><div>'+full.experience+'</div>'                                      }                                      return domTd;                                     }                              },                          }, {                              "mDataProp": "origin",                              "sDefaultContent": "",                              "bSortable": false,                              "mRender": function(data,type,full){                                 // console.log(full)                                  if(full.origin==1){                                     return "<p class='origin origin1'>"+full.gameName+"公众号</p><div>"+full.gameName+"公众号</div>"                                 }else if(full.origin==2){                                     return "<p  class='origin origin1' >"+full.gameName+"客户端</p><div>"+full.gameName+"客户端</div>"                                 }                          },                              "aTargets": [6]                          },  {                              "mDataProp": "isVip",                              "sDefaultContent": "",                              "bSortable": false,                              "mRender": function(data,type,full){                                  if(full.isVip==1){                                         return "<p class='isVip isVip1'>是</p>"                                     }else if(full.isVip==2){                                         return "<p class='isVip isVip1'>否</p>"                                     }else{                                         return "<p class='isVip isVip1'></p>"                                     }                          },                              "aTargets": [7]                          }, {                              "mDataProp": "referrer",                              "sDefaultContent": "",                              "bSortable": false,                              "aTargets": [8]                          }, {                              "mDataProp": "",                              "sDefaultContent": "",                              "mRender": function(data,type,full){                                      var str = '';                                          str += '<@shiro.hasPermission name="oop_join_business_pass"><a class="adopt" style="color:#1ab394" href="${base}/joinBusiness/toPass?tel='+full.tel+'&name='+full.name+'&id='+full.id+'&wechat='+full.wechat+'&experience='+full.experience+'&provinceCode='+full.provinceCode+'&cityCode='+full.cityCode+'&provinceName='+full.provinceName+'&cityName='+full.cityName+'&districtName='+full.districtName+'">通过</a></@shiro.hasPermission>    <@shiro.hasPermission name="oop_join_business_nopass"><a  href="${base}/joinBusiness/toRefuse?tel='+full.tel+'&name='+full.name+'&id='+full.id+'&wechat='+full.wechat+'&experience='+full.experience+'&provinceCode='+full.provinceCode+'&cityCode='+full.cityCode+'&provinceName='+full.provinceName+'&cityName='+full.cityName+'&districtName='+full.districtName+'&isVip='+full.isVip+'" style="color:#1ab394" class="eliminate">不通过</a></@shiro.hasPermission>';                                      return str                              },                              "bSortable": false,                              "aTargets": [9]                          }, ],                          "oLanguage": { // 国际化配置                              "sProcessing": "正在获取数据，请稍后...",  //描述用户在输入框输入过滤条件时的动作                              "sLengthMenu": "显示 _MENU_ 条",  // 当使用Ajax数据源和表格在第一次被加载搜集数据的时候显示的字符串，该信息在一个空行显示                              "sZeroRecords": "没有您要的内容",                              "sInfo": "",   //表格中没有数据是展示的表格信息 通常情况下格式会符合sinfo的格式                              "sInfoEmpty": "",  //当用户过滤表格中的信息的时候，该字符串会被附加到信息字符串的后面，从而给出过滤器强度的直观概念                              "sInfoFiltered": "",  //使用该属性可以很方便的向表格信息字符串中添加额外的信息，被添加的信息在任何时候都会被附加到表格信息组件的后面                              "sInfoPostFix": "",   //DataTable有内建的格式化数字的工具，可以用来格式化表格信息中较大的数字默认情况下会自动调用，可以使用该选项来自定义分割的字符                              "sSearch": "搜索",                              "sUrl": "",                              "oPaginate": {                                  "sFirst": "首页",                                  "sPrevious": "上页",                                  "sNext": "下页",                                  "sLast": "末页"                              }                          }                      });                      $("#search").on("click", function() {                           table.fnDraw();//table.api().ajax.reload();                          });

　　返回的数据格式

?

1

{<br>"iTotalRecords":1,<br>"iTotalDisplayRecords":1,<br>"iDisplayStart":"0",<br>"pageDisplayLength":"10",<br>"sEcho":"1",<br>"iSortCol_0":null,<br>"sSortDir_0":null,<br>"aaData":[<br>　　　　　　　　{"id":1,"gameName":"邵阳麻将","deviceTypeName":"全部","pushStatusName":"待推送","pushTime":"2017-11-08 15:16:25","pushStatus":"wait_push","operator":"","provinceCode":"430000","gameId":10001,"deviceType":"all","title":"方式是的方式","content":"二维若无热无","playerIds":"12332"}<br>　　　　　　],<br> "other":null,<br> "ssearch":null<br>}

　　可使用的dataTable

+ View Code?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175

var table;                 table = $("#stateList").dataTable({                     "sDom": "<'top'f<'clear'>>t<'bottom'ilpr<'clear'>>",                     "bProcessing": true,                     "bServerSide": true,                     "ordering": false,                     "bFilter": false,                     "bStateSave": false,                     "iDisplayLength": 10,                     "iDisplayStart": 0,                     "dom": "Bfrtip",                     "sServerMethod": "GET",                     "fnServerParams": function(aoData) {                         aoData.push({                             "name": "provinceCode",                             "value": $('.province').val()                         },{                             "name": "gameId",                             "value": $('.game').val()                         },{                             "name": "status",                             "value": $('.status').val()                         })                     },                     "sAjaxSource": "${base}/msg/system/list?t=" + Math.random(),                     "sScrollX": "100%",                     "bScrollCollapse": true,                     "fnDrawCallback": function(oSettings) {                         $(function () {                               $('[data-toggle="tooltip"]').tooltip();                             })                         $('.dele').click(function(){                              var that=this;                              bootbox.confirm({                                    buttons: {                                        confirm: {                                            label: '确认',                                            className: 'btn-success'                                        },                                        cancel: {                                            label: '取消',                                            className: 'btn-default'                                        }                                    },                                    message: '是否确认删除',                                    callback:function(result){                                        if(result){                                             $.ajax({                                                 type:'get',                                                 url:'${base}/msg/system/delete/'+$(that).attr('data-id'),                                                 success:function(res){                                                     if(res.meta.code==2000){                                                         $(that).parent().parent().remove();                                                         alert('删除成功')                                                     }else{                                                         alert(res.meta.message)                                                     }                                                 }                                                                                               })                                        }                                    },                                    title:'提示'                                })                                                                                             })                                           },                     "aoColumns": [ {                         "mDataProp": "contents",                         "sDefaultContent": "",                         "bSortable": false,                         "mRender":function(data, type, full){                             var str='<div style="text-align:left;">';                             var contents=full.contents;                             if(contents.length==1){                                 if(contents[0].content.length>20){                                     var content=contents[0].content.substr(0,20)+'...';                                 }else{                                     var content=contents[0].content;                                 }                                 str+='<p>标题：'+contents[0].title+'</p><p data-toggle="tooltip" data-placement="top" title="'+contents[0].content+'">内容：'+content+'</p></div>'                             }else{                                 for(var i=0;i<contents.length;i++){                                     if(contents[i].content.length>20){                                         var content=contents[i].content.substr(0,20)+'...';                                     }else{                                         var content=contents[i].content;                                     }                                     str+='<p>推送文案'+(i+1)+'</p><p>标题：'+contents[i].title+'</p><p data-toggle="tooltip" data-placement="top" title="'+contents[i].content+'">内容：'+content+'</p>'                                 }                                 str+='</div>'                             }                                                           return str;                         },                         "aTargets": [0]                     }, {                         "mDataProp": "pushCrowdName",                         "sDefaultContent": "",                         "bSortable": false,                         "aTargets": [1]                     }, {                         "mDataProp": "deviceTypeName",                         "sDefaultContent": "",                         "bSortable": false,                         "aTargets": [2]                     },{                         "mDataProp": "pushTypeName",                         "sDefaultContent": "",                         "bSortable": false,                         "aTargets": [3]                     }, {                         "mDataProp": "gameName",                         "sDefaultContent": "",                         "bSortable": false,                         "aTargets": [4]                     }, {                         "mDataProp": "pushTime",                         "sDefaultContent": "",                                                   "bSortable": false,                         "aTargets": [5]                     },{                         "mDataProp": "statusName",                         "sDefaultContent": "",                         "bSortable": false,                         "aTargets": [6]                     },{                         "mDataProp": "operator",                         "sDefaultContent": "",                         "bSortable": false,                         "aTargets": [7]                     }, {                         "mDataProp": "Operator",                         "sDefaultContent": "",                         "bSortable": false,                         "mRender": function(data, type, full) {                             var str = '';                             <@shiro.hasPermission name="oop_player_sysmsg_edit">                                 str += '<a style="margin-left:15px;"  href="${base}/msg/systemChange?id='+full.id+'&flag=1-1">修改</a>';                             </@shiro.hasPermission>                             <@shiro.hasPermission name="oop_player_sysmsg_del">                                 str += '<a class="dele" style="margin-left:15px;" data-id="'+full.id+'" href="javascript:;">删除</a>';                             </@shiro.hasPermission>                             return str;                         },                         "aTargets": [8]                     }],                     "oLanguage": { // 国际化配置                          "sProcessing": "正在获取数据，请稍后...",  //描述用户在输入框输入过滤条件时的动作                          "sLengthMenu": "显示 _MENU_ 条",  // 当使用Ajax数据源和表格在第一次被加载搜集数据的时候显示的字符串，该信息在一个空行显示                          "sZeroRecords": "没有您要的内容",                          "sInfo": "",   //表格中没有数据是展示的表格信息 通常情况下格式会符合sinfo的格式                          "sInfoEmpty": "",  //当用户过滤表格中的信息的时候，该字符串会被附加到信息字符串的后面，从而给出过滤器强度的直观概念                          "sInfoFiltered": "",  //使用该属性可以很方便的向表格信息字符串中添加额外的信息，被添加的信息在任何时候都会被附加到表格信息组件的后面                          "sInfoPostFix": "",   //DataTable有内建的格式化数字的工具，可以用来格式化表格信息中较大的数字默认情况下会自动调用，可以使用该选项来自定义分割的字符                          "sSearch": "搜索",                          "sUrl": "",                          "oPaginate": {                              "sFirst": "首页",                              "sPrevious": "上页",                              "sNext": "下页",                              "sLast": "末页"                          }                      }                 });                                   $(document).ready(function(){                     $('#search').click(function(){                         table.api().ajax.reload();                     })                                       })