使用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:;' 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" 指定列的值,页面按照指定的顺序依次展示

你可能感兴趣的:(使用JQuery中dataTable展示分页)