jquery datatables 的常见参数配置

发布时间：2023-09-06 01:34责任编辑：胡小海关键词：配置

1:导入包：

URL：http://www.datatables.net/

分别导入css和js文件

Html代码

<styletype="text/css"title="currentStyle">
@import"css/demo_page.css";
@import"css/demo_table.css";
@import"css/demo_table_jui.css";
</style>
<scripttype="text/javascript"language="javascript"
src="js/jquery.js"></script>
<scripttype="text/javascript"language="javascript"
src="js/jquery.dataTables.js"></script>

加载

Html代码

<scripttype="text/javascript">
$(document).ready(function(){
$(‘#example‘).dataTable();
});
</script>

表单

Html代码

<div>
<div>
<tablecellpadding="0"cellspacing="0"border="0"width="100%">
<thead>
<tr>
<thwidth="20%">Firstname</th>
<thwidth="20%">Lastname</th>
<thwidth="35%">City</th>
<thwidth="25%">Date</th>
</tr>
</thead>
</table>
</div>
</div>

问题：有时提示找不到datatable方法

原因

window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
$(document).ready()是DOM结构绘制完毕后就执行，不必等到加载完毕。

从后台ajax得数据重建datatables（表单的id要与json的key一致）

Js代码

$.ajax({
　　type:‘get‘,//可选get
　　url:‘${projectPath}/search‘,
　　data:{"channelType":$(‘#channelType‘).val(),"channel":$(‘#channel‘).val(),"day":$(‘#day‘).val(),"startTime":$(‘#startTime‘).val(),"endTime":$(‘#endTime‘).val(),"database":$(‘#database‘).val()},
　　dataType:‘text‘,//服务器返回的数据类型可选XML,Jsonjsonpscripthtmltext等
　　success:function(msg){
varmsgObj=JSON.parse(msg);
//重新构建table
$(‘#example‘).dataTable().fnClearTable();//将数据清除
　$(‘#example‘).dataTable().fnAddData(packagingdatatabledata(msgObj),true);//数据必须是json对象或json对象数组
　
　　},
　　error:function(){
　　alert(‘error‘);
　　}
})})

传入的数据

Js代码

//把服务器返回的数据转成datatable须要的格式
functionpackagingdatatabledata(msgObj){
vareditHtml="编辑";
//vareditHtml="编辑";
vara=[];
vartableName=[‘day‘,‘data‘,‘indata‘,‘edit‘];
varbanddata=storjson(msgObj[‘data‘]);
varbandindata=storjson(msgObj[‘indata‘]);
for(varkeyinbanddata){
vartempObj=newObject();
tempObj.day=key;
tempObj.data=banddata[key];
tempObj.indata=bandindata[key];
tempObj.edit=editHtml;
a.push(JSON.parse(JSON.stringify(tempObj,tableName)));
}
returna;
}

传入的是一个对象数组，每个对象代表一行，对象的属性即是列

单击时得到某行的值

须要引入 jquery.dataTables.nightly.js 在附件中有

Js代码

$(document).ready(function(){
$(‘#example‘).dataTable();
$(‘#exampletbodytr‘).live(‘click‘,function(){
varsTitle;
varnTds=$(‘td‘,this);
varsday=$(nTds[0]).text();//得到第1列的值
varsout=$(nTds[1]).text();
varsin=$(nTds[2]).text();
});
});

2：详细配置

Js代码

vardocrTable=$(‘#docrevisontable‘).dataTable({
"bProcessing":true,//DataTables载入数据时，是否显示‘进度’提示
"bServerSide":true,//是否启动服务器端数据导入
"bStateSave":true,//是否打开客户端状态记录功能,此功能在ajax刷新纪录的时候不会将个性化设定回复为初始化状态
"bJQueryUI":true,//是否使用jQury的UItheme
"sScrollY":450,//DataTables的高
"sScrollX":820,//DataTables的宽
"aLengthMenu":[20,40,60],//更改显示记录数选项
"iDisplayLength":40,//默认显示的记录数
"bAutoWidth":false,//是否自适应宽度
//"bScrollInfinite":false,//是否启动初始化滚动条
"bScrollCollapse":true,//是否开启DataTables的高度自适应，当数据条数不够分页数据条数的时候，插件高度是否随数据条数而改变
"bPaginate":true,//是否显示（应用）分页器
"bInfo":true,//是否显示页脚信息，DataTables插件左下角显示记录数
"sPaginationType":"full_numbers",//详细分页组，可以支持直接跳转到某页
"bSort":true,//是否启动各个字段的排序功能
"aaSorting":[[1,"asc"]],//默认的排序方式，第2列，升序排列
"bFilter":true,//是否启动过滤、搜索功能
"aoColumns":[{
"mDataProp":"USERID",
"sDefaultContent":"",//此列默认值为""，以防数据中没有此值，DataTables加载数据的时候报错
"bVisible":false//此列不显示
},{
"mDataProp":"USERNAME",
"sTitle":"用户名",
"sDefaultContent":"",
"sClass":"center"
},{
"mDataProp":"EMAIL",
"sTitle":"电子邮箱",
"sDefaultContent":"",
"sClass":"center"
},{
"mDataProp":"MOBILE",
"sTitle":"手机",
"sDefaultContent":"",
"sClass":"center"
},{
"mDataProp":"PHONE",
"sTitle":"座机",
"sDefaultContent":"",
"sClass":"center"
},{
"mDataProp":"NAME",
"sTitle":"姓名",
"sDefaultContent":"",
"sClass":"center"
},{
"mDataProp":"ISADMIN",
"sTitle":"用户权限",
"sDefaultContent":"",
"sClass":"center"
}],
"oLanguage":{//国际化配置
"sProcessing":"正在获取数据，请稍后...",
"sLengthMenu":"显示_MENU_条",
"sZeroRecords":"没有您要搜索的内容",
"sInfo":"从_START_到_END_条记录总记录数为_TOTAL_条",
"sInfoEmpty":"记录数为0",
"sInfoFiltered":"(全部记录数_MAX_条)",
"sInfoPostFix":"",
"sSearch":"搜索",
"sUrl":"",
"oPaginate":{
"sFirst":"第一页",
"sPrevious":"上一页",
"sNext":"下一页",
"sLast":"最后一页"
}
},
"fnRowCallback":function(nRow,aData,iDisplayIndex){
if(aData.ISADMIN==‘1‘)
$(‘td:eq(5)‘,nRow).html(‘管理员‘);
if(aData.ISADMIN==‘2‘)
$(‘td:eq(5)‘,nRow).html(‘资料下载‘);
if(aData.ISADMIN==‘3‘)
$(‘td:eq(5)‘,nRow).html(‘一般用户‘);
returnnRow;
},
"sAjaxSource":"../use/userList.do?now="+newDate().getTime(),
//服务器端，数据回调处理
"fnServerData":function(sSource,aDataSet,fnCallback){
$.ajax({
"dataType":‘json‘,
"type":"POST",
"url":sSource,
"data":aDataSet,
"success":fnCallback
});
}
});
$("#docrevisontabletbody").click(function(event){//当点击表格内某一条记录的时候，会将此记录的cId和cName写入到隐藏域中
$(docrTable.fnSettings().aoData).each(function(){
$(this.nTr).removeClass(‘row_selected‘);
});
$(event.target.parentNode).addClass(‘row_selected‘);
varaData=docrTable.fnGetData(event.target.parentNode);
$("#userId").val(aData.USERID);
$("#userN").val(aData.USERNAME);
});
$(‘#docrevisontable_filter‘).html(‘用户管理列表‘);
$(‘#docrevisontable_filter‘).append(‘‘);
$(‘#docrevisontable_filter‘).append(‘‘);
$(‘#docrevisontable_filter‘).append(‘‘);
$(‘#docrevisontable_filter‘).append(‘‘);
}

设置隐藏列

Js代码

varoTable=$(‘#example‘).dataTable();
oTable.fnSetColumnVis(0,false);//隐藏列

得到当前页面中的数据

var alldata=$(‘#example‘).dataTable().fnGetData();//得到页面中所有对象

// Row data
$(document).ready(function() {
oTable = $(‘#example‘).dataTable();

oTable.$(‘tr‘).click( function () {
var data = oTable.fnGetData( this );
// ... do something with the array / object of data for the row
} );
} );

// Individual cell data
$(document).ready(function() {
oTable = $(‘#example‘).dataTable();

oTable.$(‘td‘).click( function () {
var sData = oTable.fnGetData( this );
alert( ‘The cell clicked on had the value of ‘+sData );
} );
} );

刷新表中的数据(最后一个参数是否重绘表格，false你浏览到第二页不会刷跑到第一页，但数据不会改变)

$(‘#example‘).dataTable().fnUpdate( ‘

知识推荐

我的编程学习网——分享web前端后端开发技术知识。垃圾信息处理邮箱 tousu563@163.com 网站地图