本文主要是介绍使用JQuery中dataTable展示分页,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
$.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:;' οnclick=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" 指定列的值,页面按照指定的顺序依次展示
这篇关于使用JQuery中dataTable展示分页的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!