标签：
1:导入包：
URL：http://www.datatables.net/
分别导入css和js文件
Html代码
- <</span>style type="text/css" title="currentStyle">
- @import "css/demo_page.css";
-
- @import "css/demo_table.css";
-
- @import "css/demo_table_jui.css";
- </</span>style>
- <</span>script type="text/javascript" language="javascript"
- src="js/jquery.js"></</span>script>
-
- <</span>script type="text/javascript" language="javascript"
- src="js/jquery.dataTables.js"></</span>script>
加载
Html代码
- <</span>script type="text/javascript">
- $(document).ready(function() {
- $(‘#example‘).dataTable();
- });
- </</span>script>
表单
Html代码
- <</span>div class="col_2_3_right">
- <</span>div class="index_viewport">
- <</span>table id="example" cellpadding="0" cellspacing="0" border="0" width="100%">
- <</span>thead>
- <</span>tr>
- <</span>th width="20%">First name</</span>th>
- <</span>th width="20%">Last name</</span>th>
- <</span>th width="35%">City</</span>th>
- <</span>th width="25%">Date</</span>th>
- </</span>tr>
- </</span>thead>
- </</span>table>
- </</span>div>
- </</span>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 ,Json jsonp script htmltext等
-
success:function(msg){
-
var msgObj=JSON.parse(msg);
-
//重新构建table
-
$(‘#example‘).dataTable().fnClearTable(); //将数据清除
-
$(‘#example‘).dataTable().fnAddData(packagingdatatabledata(msgObj),true); //数据必须是json对象或json对象数组
-
-
},
-
error:function(){
-
alert(‘error‘);
-
}
-
})})
传入的数据
Js代码
-
//把服务器返回的数据转成datatable须要的格式
-
function packagingdatatabledata(msgObj){
-
var editHtml="编辑";
-
//var editHtml="编辑";
-
var a=[];
-
var tableName=[‘day‘,‘data‘,‘indata‘,‘edit‘];
-
var banddata=storjson(msgObj[‘data‘]);
-
var bandindata=storjson(msgObj[‘indata‘]);
-
for(var key in banddata){
-
var tempObj=new Object();
-
tempObj.day=key;
-
tempObj.data=banddata[key];
-
tempObj.indata=bandindata[key];
-
tempObj.edit=editHtml;
-
a.push(JSON.parse(JSON.stringify(tempObj,tableName)));
-
}
-
return a;
-
}
传入的是一个对象数组，每个对象代表一行，对象的属性即是列
单击时得到某行的值
须要引入
jquery.dataTables.nightly.js
在附件中有
Js代码
-
$(document).ready(function() {
-
-
$(‘#example‘).dataTable();
-
$(‘#example tbody tr‘).live(‘click‘, function () {
-
var sTitle;
-
var nTds = $(‘td‘, this);
-
var sday = $(nTds[0]).text(); //得到第1列的值
-
var sout = $(nTds[1]).text();
-
var sin = $(nTds[2]).text();
-
-
} );
-
-
} );
2：详细配置
Js代码
-
var docrTable = $(‘#docrevisontable‘).dataTable({
-
"bProcessing" : true, //DataTables载入数据时，是否显示‘进度’提示
-
"bServerSide" : true, //是否启动服务器端数据导入
-
"bStateSave" : true, //是否打开客户端状态记录功能,此功能在ajax刷新纪录的时候不会将个性化设定回复为初始化状态
-
"bJQueryUI" : true, //是否使用 jQury的UI theme
-
"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(‘一般用户‘);
-
-
return nRow;
-
},
-
-
"sAjaxSource" : "../use/userList.do?now=" + new Date().getTime(),
-
//服务器端，数据回调处理
-
"fnServerData" : function(sSource, aDataSet, fnCallback) {
-
$.ajax({
-
"dataType" : ‘json‘,
-
"type" : "POST",
-
"url" : sSource,
-
"data" : aDataSet,
-
"success" : fnCallback
-
});
-
}
-
});
-
-
$("#docrevisontable tbody").click(function(event) { //当点击表格内某一条记录的时候，会将此记录的cId和cName写入到隐藏域中
-
$(docrTable.fnSettings().aoData).each(function() {
-
$(this.nTr).removeClass(‘row_selected‘);
-
});
-
$(event.target.parentNode).addClass(‘row_selected‘);
-
var aData = 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代码
-
var oTable = $(‘#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( ‘a‘ , 1 , 1 ,false);
//coll
$(‘#example‘).dataTable().fnUpdate( [‘a‘,‘b‘] , 1 ); //row
得到当前浏览的datatables页码
Js代码
-
var tableSetings=$(‘#example‘).dataTable().fnSettings()
-
var paging_length=tableSetings._iDisplayLength;//当前每页显示多少
-
var page_start=tableSetings._iDisplayStart;//当前页开始
-
var page=Div(page_start,paging_length);
-
-
function Div(exp1, exp2) { //整除
-
var n1 = Math.round(exp1); //四舍五入
-
var n2 = Math.round(exp2); //四舍五入
-
-
var rslt = n1 / n2; //除
-
if (rslt >= 0) {
-
rslt = Math.floor(rslt); //返回小于等于原rslt的最大整数。
-
}
-
else {
-
rslt = Math.ceil(rslt); //返回大于等于原rslt的最小整数。
-
}
-
return rslt;
-
}
设置datatables跳转到某页
Js代码
-
$(‘#example‘).dataTable().fnPageChange(page);
注意：由于后台数据可能已经被其它人改变（记录个数与现在前台不一致），所以数据fnUpdate时须要判断前后端数据的一致性，只刷
新前台有的数据的状态
dom:
最后注明：本文转自http://blog.csdn.net/lisky119/article/details/25884197
jquery datatables 的常见参数配置
标签：
原文地址：http://www.cnblogs.com/ma-lijun/p/5565977.html
