DataTable在ajax上的应用

DataTables 我的网盘地址（包括demo）：链接：http://pan.baidu.com/s/1chLkUM密码：bejv

这里边只复用插件，其他的都不需要

需要用到的插件：

dataTables.min.css、jquery-2.1.0.min.js

jquery.dataTables.min.js  这些都可以在我的网盘中或这自己下载的插件中找到

Tjxfxx2.js 自己设置

Html中配置index.jsp

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>














	

		

		

        

            
信访标识
            
采集开始时间
            
采集结束时间
            
信访形式代码
            
信访形式名称
            
入库状态
        
    
		
	

Tjxfxx2.js

var dataObject = [];
$(function() {
	getXfbsTable();
});
// 信访数据table
function getXfbsTable() {
	dataObject = [];
	$.ajax({
				type : 'post',
				url : '/xfjkcj/getXfbsTable',
				dataType : 'json',
				async : true,
				beforeSend:function(){
					$("#loading").show();
				},
				success : function(datalist) {
						 dataObject = datalist;
						//此处返回的json格式类型是List>
						console.log(dataObject);
						//目的是为了解决重复加载原数据不改变问题（需要两个DataTable，并且得在第二个添加destroy）
						$('#XfbsTable').dataTable({
							"bAutoWidth": true,  //自动设置宽度
							"bScrollCollapse": false, //滚动条关闭
						    bRetrieve: true,//去掉错误提示
						});
						$('#XfbsTable').DataTable({
							"destroy": true,
							"bLengthChange": false,   //去掉每页显示多少条数据方法
							data:dataObject,
							/*给数据添加列*/
							columns:[
							    {data:'xfbs'}, 
							    {data:'kssj'},
							    {data:'jssj'}, 
							    {data:'xfxsdm'},
							    {data:'xfxsmc'},
							    {data:'state'}
							  ],
							  /*国际化语言*/
							  language : {
									"sProcessing" : "处理中...",
									"sLengthMenu" : "显示 _MENU_ 项结果",
									"sZeroRecords" : "没有匹配结果",
									"sInfo" : "显示第 _START_ 至 _END_ 项结果，共 _TOTAL_ 项",
									"sInfoEmpty" : "显示第 0 至 0 项结果，共 0 项",
									"sInfoFiltered" : "(由 _MAX_ 项结果过滤)",
									"sInfoPostFix" : "",
									"sSearch" : "搜索:",
									"sUrl" : "",
									"sEmptyTable" : "表中数据为空",
									"sLoadingRecords" : "载入中...",
									"sInfoThousands" : ",",
									"oPaginate" : {
										"sFirst" : "首页",
										"sPrevious" : "上页",
										"sNext" : "下页",
										"sLast" : "末页"
									},
									"oAria" : {
										"sSortAscending" : ": 以升序排列此列",
										"sSortDescending" : ": 以降序排列此列"
									}
								}, 
						});
						
				},
				complete:function(){
					$("#loading").hide();
				},
				error : function(resource) {
					console.log("ajax请求出错了");
				}
			});
}