dataTable插件的使用
var table; table = $("#example").dataTable({ "sDom": "<'top'f<'clear'>>t<'bottom'ilpr<'clear'>>",
"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(); });
返回的数据格式
{
"iTotalRecords":1,
"iTotalDisplayRecords":1,
"iDisplayStart":"0",
"pageDisplayLength":"10",
"sEcho":"1",
"iSortCol_0":null,
"sSortDir_0":null,
"aaData":[
{"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"}
],
"other":null,
"ssearch":null
}
可使用的dataTable
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(); }) })
你要觉得这篇文章比较好,记得点推荐!