$.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" 指定列的值,页面按照指定的顺序依次展示