您的位置:首页 > Web前端 > JQuery

使用JQuery中dataTable展示分页

2015-12-15 18:55 633 查看
$.ajax({
type: "POST",
url: "<%=path%>/sdc/ss",
dataType: 'json',
success: function(msg){
$(".table-sort").dataTable({
"aaData": eval(msg.data.data),  //需要展示数据数组
"aoColumns" : [  {
"mDataProp" : "id",
},{
"mDataProp" : "title",
}, {
"mDataProp" : "intro",
}, {
"mDataProp" : "is_open",
}, {
"mDataProp" : "is_open",
}  ],
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
if ( aData['is_open'] == 0 )
{
$('td:eq(3)', nRow).html( "<span data='0' class='label label-success radius'>已启用</span>" );
}else{
$('td:eq(3)', nRow).html( "<span data='1' class='label label-defaunt radius'>已停用</span>" );
}
var url="course-update.jsp?id="+aData['id']+"&title="+aData['title']+"&des="+aData['intro'];
$('td:eq(4)', nRow).html( "<a title='修改科目' href='javascript:;' onclick=member_update(this,'修改科目','"+url+"','','510') class='ml-5' style='text-decoration:none'><i class='Hui-iconfont'></i></a>" );
return nRow;
},
"bAutoWidth": true, //自适应宽度
"sPaginationType" : "full_numbers",
"oLanguage" : {
"sProcessing" : "正在加载中......",
"sLengthMenu" : "每页显示 _MENU_ 条记录",
"sZeroRecords" : "正在加载中......",
"sEmptyTable" : "表中无数据存在!",
"sInfo" : "当前显示 _START_ 到 _END_ 条,共 _TOTAL_ 条记录",
"sInfoEmpty" : "显示0到0条记录",
"sInfoFiltered" : "数据表中共为 _MAX_ 条记录",
"sSearch" : "搜索",
"oPaginate" : {
"sFirst" : "首页",
"sPrevious" : "上一页",
"sNext" : "下一页",
"sLast" : "末页"
}
}
});
}
});


PS:

在后台读取数据时可以使用"sAjaxSource": "${ctx}/plans?action=ajax","sServerMethod": "POST"实现ajax请求

因为我目前项目需求操作数据库中的json字段,所以需要先用ajax得到数据,在使用"aaData":展示我得到的数组

使用"fnRowCallback"属性,实现得到特定字符串的转换成用户易懂的文字,给用户提供一个更好的视觉效果

"aoColumns" 指定列的值,页面按照指定的顺序依次展示
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: