JQuery datatables api
$(function(){
var docrTable = $('#aaa').dataTable({
"destroy":true, //不加会报错
"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"
"mRender" : function(data, type, full) { // 返回自定义内容
return data+"222";
}
}, {
"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('<span>用户管理列表');
$('#docrevisontable_filter').append(' <input type="button" class="addBtn" id="addBut" value="创建"/>');
$('#docrevisontable_filter').append(' <input type="button" class="addBtn" id="addBut" value="修改"/>');
$('#docrevisontable_filter').append(' <input type="button" class="addBtn" id="addBut" value="删除"/>');
$('#docrevisontable_filter').append('</span>');
});
})使用报错就删除一部分,直到可以使用为止。
aoColumns的参数有：
| 用户参数名 | 源码参数名 | 英文解释 | 中文解释 |
| cellType |
sCellType | Cell type to be created for a column | 设置列标签的类型（ex：th，td） |
| className | sClass | Class to assign to each cell in the column | 设置列的class属性值 |
| contentPadding | sContentPadding | Add padding to the text content used when calculating the optimal with for a table. | 设置填充内容，以计算与优化为一个表时所使用的文本内容，一般不需要设置 |
| createdCell | fnCreatedCell | Cell created callback to allow DOM manipulation | 设置cell创建完后的回调函数，设置背景色或者添加行 |
| data | mData | Set the data source for the column from the rows data object / array | 设置单元格里的值 |
| defaultContent | sDefaultContent | Set default, static, content for a column | 设置列的默认值 |
| name | sName | Set a descriptive name for a column | 设置列的描述性名称 |
| orderable | bSortable | Enable or disable ordering on this column | 设置列是否可以排序 |
| orderData | aDataSort | Define multiple column ordering as the default order for a column | 设置多列排序时列的默认顺序 |
| orderDataType | sSortDataType | Live DOM sorting type assignment | |
| orderSequence | asSorting | Order direction application sequence | 设置列的默认排序，可以改变列排序的顺序处理 |
| render | mRender | Render (process) the data for use in the table | |
| searchable | bSearchable | Enable or disable filtering on the data in this column | 设置列的数据是否过滤 |
| title | sTitle | Set the column title | 设置列的标题 |
| type | sType | Set the column type - used for filtering and sorting string processing. Four types (string, numeric, date and html (which will strip HTML tags before ordering)) are currently available. | 设置列的类型，用于过滤和排序的字符串处理。 |
| visible | bVisible | Enable or disable the display of this column | 设置列是否显示 |
| width | sWidth | Column width assignment | 定义列的宽度 |
博主通用配置如下：
$(function(){
var docrTable = $('#docrevisontable').dataTable({
"destroy":true, //不加会报错
"bProcessing" : false, //DataTables载入数据时，是否显示‘进度’提示
"bInfo" : true, //是否显示页脚信息，DataTables插件左下角显示记录数
"sPaginationType" : "full_numbers", //详细分页组，可以支持直接跳转到某页
"bSort" : true, //是否启动各个字段的排序功能
"aaSorting" : [[0, "asc"]], //默认的排序方式，第n列，升序排列
"aLengthMenu" : [10, 20, 50], //更改显示记录数选项
"iDisplayLength" : 10, //默认显示的记录数
"aoColumns" : [ //有几列就写几个，我有九列，所以是九个
null,
null,
{ //表示第三列
"bVisible" :true, //是否可见
"bSearchable": false, //是否参与搜素
"bSortable":false, //是否排序
"sWidth":200 //设置宽度
},
null,
null,
null,
null,
null,
null
],
"oLanguage": { //显示设置
"sProcessing" : "正在获取数据，请稍后...",
"sLengthMenu" : "显示 _MENU_ 条",
"sZeroRecords" : "没有您要搜索的内容",
"sInfo" : "从 _START_ 到 _END_ 条记录 总记录数为 _TOTAL_ 条",
"sInfoEmpty" : "记录数为0",
"sInfoFiltered" : "(全部记录数 _MAX_ 条)",
"sInfoPostFix" : "",
"sSearch" : "搜索",
"oPaginate": {
"sFirst" : "第一页",
"sPrevious" : "上一页",
"sNext" : "下一页",
"sLast" : "最后一页"
}
}
});
})
2819
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
