dataTable插件的使用
Posted 地铁程序员
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了dataTable插件的使用相关的知识，希望对你有一定的参考价值。
var table;
table = $("#example").dataTable({
"sDom": "<‘top‘f<‘clear‘>>t<‘bottom‘ilpr<‘clear‘>>",
"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();
});
以上是关于dataTable插件的使用的主要内容，如果未能解决你的问题，请参考以下文章