Javaweb表格加载---DataTable

“这是我参与8月更文挑战的第10天，活动详情查看：8月更文挑战”

Datatables是一款jquery表格插件

Datatables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。 使用 jQuery Datatable 构造数据列表，并且增加或者隐藏相应的列，已达到数据显示要求。同时， jQuery Datatable 强大的功能支持：排序，分页，搜索等。

datatable引入

• css : //cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css

• js : //cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js

• 这里申明一下，引入这上面js前提是引入jquery，因为这是基于jquery开发的

表格的创建

• 环境准备好之后，我们需要提供一个table的样板。就是给一个table 并命名一个ID，下面是我项目中class样式，你可以不引入只需要一个id

<table class="table table-striped table-hover table-bordered" id="adminTable">
</table>

参数说明

var  adminTable = $('#adminTable').DataTable({});

• 最后我们只需要在js中向上面那样就行了。只不过想要实现我们想象中的table我们需要对adminTable指定相应的参数。首先需要的就是请求地址的指定

• sAjaxSource： 指定我们的请求路径

• lengthMenu： 表格中每页的大小，就是下面的效果

• pageLength：当前默认每页显示的数量

• oLanguage：这里是一些语言的设置，提示语言的设置，默认是英文的，。

"sProcessing" : "正在加载数据...",
					"sSearch" : "搜索:",
					"sLengthMenu" : "_MENU_条记录",
					"sZeroRecords" : "没有查到记录",
					"sInfo" : "第  _START_ 条到第  _END_ 条记录,一共  _TOTAL_ 条记录",
					"sInfoEmpty" : "0条记录",
					"oPaginate" : 
					{
						"sPrevious" : "上一页 ",
						"sNext" : " 下一页",
					}

• 还有一些额外的设置，"bSort" : true, "bProcessing" : true, "bServerSide" : true, "async" : false,

• 最后数据显示才是重点。这个放在下面讲解

数据匹配显示

• 上面我们已经将表格的请求通过sAjaxSource这个属性指定好了，那么至于数据是如何显示在正确的位置的呢，主要是通过aoColumns这个属性匹配的。首先我们看看我们后台发回来的数据长啥样子

• aaDataa是我们的数据，一看就知道是个list，aaData下表就是所在索引，每个索引里面又有1-7的索引，1-7就是相当于我们表格的7列，所以我们前台table就是遍历aaData将1-7附在对应的列上，datatable也很简单，就是按照顺序赋值的的，所以我们按顺序写列名就行了

[
						{
							"sTitle" : "id",
							"bSortable" : false
						},
						{
							"sTitle" : '<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline"><input type="checkbox" id="checkAll" onclick="adminChooseOrNoChoose(this)" /><span></span></label>',
							"bSortable" : false,
							"sClass" : "text-center",
							"fnCreatedCell" : function(nTd, sData, oData,iRow, iCol) 
							{
								var value = oData[0];
								var content = '<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline"><input type="checkbox" class="testCheckbox" onclick="recordMainId(this)" value="'+value+'" /><span></span></label>';
								$(nTd).html(content);
							}
						}, {
							"sTitle" : "用户名",
							"bSortable" : true,
							"sClass" : "text-center"
						}, {
							"sTitle" : "姓名",
							"bSortable" : true,
							"bAutoWidth" : true,
							"sClass" : "text-center"
						}, {
							"sTitle" : "授权人",
							"bSortable" : false,
							"sClass" : "text-center"
						}, {
							"sTitle" : "已分配角色",
							"bSortable" : true,
							"sClass" : "text-center"
						}, {
							"sTitle" : "管辖站点",
							"bSortable" : true,
							"sClass" : "text-center"
						}, {
							"sTitle" : "创建时间",
							"bSortable" : true,
							"sClass" : "text-center"
						}, {
							"sTitle" : "操作",
							"bSortable" : true,
							"sClass" : "text-center"
						} ]

• 至于每列的设置，大家看名称应该知道是啥意思。但是我们的列并不是仅仅显示数据的。比如有的是要加超链接。有的并不是仅仅显示原始数据，需要进行加工处理的。这里我们需要一个加工函数，上面也提到了。

列数据二次加工

fnCreatedCell

• 方法就是多数据进行二次加工。

"fnCreatedCell" : function(nTd, sData, oData,iRow, iCol) 
							{
								var value = oData[0];
								var content = '<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline"><input type="checkbox" class="testCheckbox" onclick="recordMainId(this)" value="'+value+'" /><span></span></label>';
								$(nTd).html(content);
							}

• 其中值得一说的里面参数就是oData，oData就是所在行的所有列数据的集合数组。很有用的。比如你想去改行的第一列数据，直接oData[0]就取到了。在做修改删除很有用。

• 但是dataTable还通过另外一种方式对数据进行二次处理。就是通过aoColumnDefs这个属性来指定具体列的数据加工。

[
						{
							"bSearchable" : true,
							"bVisible" : false,
							"aTargets" : [ 0 ]
						},
						{
							"aTargets" : [ 3 ],
							"mRender" : function(data,type, full) 
							{
								var value=full[0];
								return "<a href='' onclick='showUserInfo(\""+value+"\")' data-toggle='modal' data-target='#viewModal'>"+ data+ "</a>";
							}
						},
						{
							"aTargets" : [ 4 ],
							"mRender" : function(data,type, full) 
							{
								if(data==null)
								{
									data="@@@"
								}
								var arr = data.split("@@@");
								return "<a href='' data-toggle='modal' data-target='#viewModal' onclick='showUserInfo(\""+ arr[0]+ "\")' >"+ arr[1]+ "</a>";
							}
						},
						{
							"aTargets" : [ 8 ],
							"mRender" : function(data,type, full) {
								return "<a href='javascript;;' onclick=' return adminUpdate(this)' site='"+ full[6]+ "' id='"+ full[0]+ "' name='"+ full[2]+ "' data-toggle='modal' data-target='#myModalUpdate'>修改</a>     <a href='' data-toggle='modal' data-target='#deleteModal' onclick='return adminDelete(this)' id='"+full[0]+"' role='"+ full[5]+ "'>删除</a>";
							}
						} ]

• 这种方法缺陷就是需要我们指定列号，但是实际开发中我们的列号可能是会因为项目需求而改变的，所以这个方法不是很好，但是也能实现同样的效果。然后通过mRender指定函数时间，里面的full和oData是一个数据效果。

• 到这里数据显示及一些CURD操作基本就实现了。但是有的时候我们需要将表格加载数据是携带参数查询，这个时候我们除了在指定的请求上加，还有一种方法是在数据回调是处理的。通过fnServerData属性，我们可以加条件参数传入后台。

// 服务器端，数据回调处理  
				"fnServerData" : function retrieveData(sSource, aoData, fnCallback) 
				{
					aoData.push({
						"name" : "user_name",
						"value" : $('#user_name').val()
					});
					aoData.push({
						"name" : "real_name",
						"value" : $('#real_name').val()
					});
					aoData.push({
						"name" : "create_user_name",
						"value" : $(
								'#create_user_name').val()
					});
					aoData.push({
						"name" : "site_id",
						"value" : $('#site_id').val()
					});
					aoData.push({
						"name" : "fromTime",
						"value" : $('#fromTime').val()
					});
					aoData.push({
						"name" : "toTime",
						"value" : $('#toTime').val()
					});
					$.ajax({
						"type" : "POST",
						"url" : sSource,
						"dataType" : "json",
						"contentType" : "application/json",
						"data" : JSON.stringify(aoData),
						"success" : function(data) 
						{
							fnCallback(data);
						}
					});
				}

• 条件参数通过aoData.push方法加入。到这里前台table已经显示完了。我们在看看后台数据处理逻辑。

后台参数接收

• 前台我们指定的请求我们在后台对应的请求中加入如下参数。

• 前台中的aoData.push进来的参数及datatable自身关于分页等等的信息数据全是放在dataTableParams这个变量中。我们只需要将他转换成map就可以传入数据库操作了。

转map代码：

HashMap<String, String> paramsMap = new HashMap<>();
		for (DataTableParam dataTableParam : dataTableParams) 
		{
			paramsMap.put(dataTableParam.getName(), dataTableParam.getValue());
		}

• 下面的操作我就不在细致说了，下面就是传入数据sql的操作了。

表格刷新

• 在实际中我们都需要不刷新页面只刷新页面中某个空间。datatable基于此需求专门提供了刷新表格的方法。在实际开发中我们改变了表中数据最后我们调用刷新的方法就行了

adminTable.draw();

使用dataTable常见问题汇总

• 这个问题基本上就是数据不匹配，这是因为我在前台aoColumns中指定了7列，但是我们后台只穿回来6列的原因，只要少于7列都是这种错误。修改方法：去后台添加完整数据。就算某列时空也要加入，加入空字符串代替，因为前台是按顺序的加载数据的，所以没数据也要用空字符串占替位置。

dataTable发展的版本很多，不同的版本里面的参数名可能不太一样，需要注意一下，有的版本加载table的请求地址是通过ajax属性来实现的。有的就是sAjaxSource属性实现的，只是名称不一样了而已。

完整DataTable加载样本

var adminTable= $('#adminTable').DataTable(
			{
				"bSort" : true,
				"bProcessing" : true,
				"bServerSide" : true,
				"async" : false,
				//"retrieve" : true,//保证只有一个table实例  
				"bStateSave" : false,
				"sAjaxSource" : jQuery.getBasePath()
						+ "/adminManage/tableDisplay.bsh",
				"sDom" : '<"top"l<"clear">>rt<"bottom"ip<"clear">>',
				"lengthMenu" : [ 10, 25, 75, 100 ],
				"pageLength" : 10,
				"oLanguage" : 
				{
					"sProcessing" : "正在加载数据...",
					"sSearch" : "搜索:",
					"sLengthMenu" : "_MENU_条记录",
					"sZeroRecords" : "没有查到记录",
					"sInfo" : "第  _START_ 条到第  _END_ 条记录,一共  _TOTAL_ 条记录",
					"sInfoEmpty" : "0条记录",
					"oPaginate" : 
					{
						"sPrevious" : "上一页 ",
						"sNext" : " 下一页",
					}
				},
				"aoColumnDefs" : [
						{
							"bSearchable" : true,
							"bVisible" : false,
							"aTargets" : [ 0 ]
						},
						{
							"aTargets" : [ 3 ],
							"mRender" : function(data,type, full) 
							{
								var value=full[0];
								return "<a href='' onclick='showUserInfo(\""+value+"\")' data-toggle='modal' data-target='#viewModal'>"+ data+ "</a>";
							}
						},
						{
							"aTargets" : [ 4 ],
							"mRender" : function(data,type, full) 
							{
								if(data==null)
								{
									data="@@@"
								}
								var arr = data.split("@@@");
								return "<a href='' data-toggle='modal' data-target='#viewModal' onclick='showUserInfo(\""+ arr[0]+ "\")' >"+ arr[1]+ "</a>";
							}
						},
						{
							"aTargets" : [ 8 ],
							"mRender" : function(data,type, full) {
								return "<a href='javascript;;' onclick=' return adminUpdate(this)' site='"+ full[6]+ "' id='"+ full[0]+ "' name='"+ full[2]+ "' data-toggle='modal' data-target='#myModalUpdate'>修改</a>     <a href='' data-toggle='modal' data-target='#deleteModal' onclick='return adminDelete(this)' id='"+full[0]+"' role='"+ full[5]+ "'>删除</a>";
							}
						} ],
				"aoColumns" : [
						{
							"sTitle" : "id",
							"bSortable" : false
						},
						{
							"sTitle" : '<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline"><input type="checkbox" id="checkAll" onclick="adminChooseOrNoChoose(this)" /><span></span></label>',
							"bSortable" : false,
							"sClass" : "text-center",
							"fnCreatedCell" : function(nTd, sData, oData,iRow, iCol) 
							{
								var value = oData[0];
								var content = '<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline"><input type="checkbox" class="testCheckbox" onclick="recordMainId(this)" value="'+value+'" /><span></span></label>';
								$(nTd).html(content);
							}
						}, {
							"sTitle" : "用户名",
							"bSortable" : true,
							"sClass" : "text-center"
						}, {
							"sTitle" : "姓名",
							"bSortable" : true,
							"bAutoWidth" : true,
							"sClass" : "text-center"
						}, {
							"sTitle" : "授权人",
							"bSortable" : false,
							"sClass" : "text-center"
						}, {
							"sTitle" : "已分配角色",
							"bSortable" : true,
							"sClass" : "text-center"
						}, {
							"sTitle" : "管辖站点",
							"bSortable" : true,
							"sClass" : "text-center"
						}, {
							"sTitle" : "创建时间",
							"bSortable" : true,
							"sClass" : "text-center"
						}, {
							"sTitle" : "操作",
							"bSortable" : true,
							"sClass" : "text-center"
						} ],
				// 服务器端，数据回调处理  
				"fnServerData" : function retrieveData(sSource, aoData, fnCallback) 
				{
					aoData.push({
						"name" : "user_name",
						"value" : $('#user_name').val()
					});
					aoData.push({
						"name" : "real_name",
						"value" : $('#real_name').val()
					});
					aoData.push({
						"name" : "create_user_name",
						"value" : $(
								'#create_user_name').val()
					});
					aoData.push({
						"name" : "site_id",
						"value" : $('#site_id').val()
					});
					aoData.push({
						"name" : "fromTime",
						"value" : $('#fromTime').val()
					});
					aoData.push({
						"name" : "toTime",
						"value" : $('#toTime').val()
					});
					$.ajax({
						"type" : "POST",
						"url" : sSource,
						"dataType" : "json",
						"contentType" : "application/json",
						"data" : JSON.stringify(aoData),
						"success" : function(data) 
						{
							fnCallback(data);
						}
					});
				}
			});
}

function initSelectTable() 
{
	UserDataTable = $('#selectUserTable').DataTable(
	{
		"bSort" : true,
		"bProcessing" : true,
		"bServerSide" : true,
		"bStateSave" : false,
		/* "sScrollX": "100%",
		"sScrollXInner": "100%",
		"bScrollCollapse": true, */
		"bAutoWidth" : false,
		"sAjaxSource" : jQuery.getBasePath()+ "/userManage/getUserTable.bsh",
		"sDom" : '<"top"l<"clear">>rt<"bottom"ip<"clear">>',
		"lengthMenu" : [ 3, 20, 30 ],
		"pageLength" : 3,
		"oLanguage" : {
		"sProcessing" : "正在加载数据...",
		"sSearch" : "搜索:",
		"sLengthMenu" : "_MENU_条记录",
		"sZeroRecords" : "没有查到记录",
		"sInfo" : "第  _START_ 条到第  _END_ 条记录,一共  _TOTAL_ 条记录",
		"sInfoEmpty" : "0条记录",
		"oPaginate" : 
		{
			"sPrevious" : "上一页 ",
			"sNext" : " 下一页",
		}
	},
	"aoColumnDefs" : [
		{
			"bSearchable" : true,
			"bVisible" : false,
			"aTargets" : [ 0 ]
		},
		{
			"aTargets" : [ 1 ],
			"mRender" : function(data,type, full) 
			{
				return "<a href='' onclick='viewUser("+ full[0]+ ")' data-toggle='modal' data-target='#viewModal'>"+ data + "</a>";
			}
		},
		{
            "aTargets":[2],
            "mRender":function(data,type,full)
            {
              return "<a href='' onclick='showUserInfo(\""+full[0]+"\")' data-toggle='modal' data-target='#viewModal'>"+data+"</a>";
            } 
        },
		{
			"aTargets" : [ 3 ],
			"mRender" : function(data,type, full) 
			{
				if(data=="1")
				{
                	return "已认证";
                }
				else if(data=="2")
				{
               		return "未认证";
                }
				else if(data=="3")
                {
               		return "待认证";
                }
				else if(data=="4")
				{
               		return "已驳回";
                }
			}
		},
		{
			"aTargets" : [ 4 ],
			"mRender" : function(data,type, full) 
			{
				if (data > 0) 
				{
					return "关闭";
				} 
				else 
				{
					return "启用";
				}
			}
		} ],
	"aoColumns" : [
		{
			"sTitle" : "id",
			"bSortable" : false
		},
		{
			"sTitle" : '<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline"><input type="checkbox" id="checkAll" onclick="chooseOrNoChoose(this)" /><span></span></label>',
			"bSortable" : false,
			"sClass" : "text-center",
			"fnCreatedCell" : function(nTd, sData, oData,iRow, iCol) 
							{
								var value = oData[0]+"@@@"+oData[2];
								var content = '<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline"><input type="checkbox" class="userCheckbox" onchange="recordUserId(this)" name="'+ oData[2]+ '" value="'+ value+ '" /><span></span></label>';
								$(nTd).html(content);
							}
		}, 
		{
			"sTitle" : "用户名",
			"bSortable" : true,
			"sWidth" : "120px",
			"sClass" : "text-center"
		}, 
		{
			"sTitle" : "实名认证",
			"sWidth" : "90px",
			"bSortable" : true,
			"sClass" : "text-center"
		}, 
		{
			"sTitle" : "状态",
			"sWidth" : "90px",
			"bSortable" : false,
			"sClass" : "text-center"
		}, 
		{
			"sTitle" : "所属站点",
			"bSortable" : false,
			"sWidth" : "180px",
			"bAutoWidth" : true,
			"sClass" : "text-center"
		} ],
	// 服务器端，数据回调处理  
	"fnServerData" : function retrieveData(sSource, aoData, fnCallback) 
	{
		aoData.push({"name" : "userName","value" : $("#selectUserName").val()});
		aoData.push({"name":"site","value":$("#site").val()});
		/*aoData.push({"name":"end","value":$("#end").val()});
		aoData.push({"name":"realName","value":$("#realName").val()});
		aoData.push({"name":"status","value":$("#status").val()});
		aoData.push({"name":"site","value":$("#site").val()}) */
		$.ajax({
			"type" : "POST",
			"url" : sSource,
			"dataType" : "json",
			"contentType" : "application/json",
			"data" : JSON.stringify(aoData),
			"success" : function(data) 
			{
				fnCallback(data);
			}
		});
	}
	});			
}

function initRoleTable() 
{
	RoleDataTable = $('#selectRoleTable').DataTable(
	{
		"bSort" : true,
		"bProcessing" : true,
		"bServerSide" : true,
		"bStateSave" : false,
		/* "sScrollX": "100%",
		"sScrollXInner": "100%",
    	"bScrollCollapse": true, */
		"bAutoWidth" : false,
		"sAjaxSource" : jQuery.getBasePath()+ "/adminManage/roleList.bsh",
		"sDom" : '<"top"l<"clear">>rt<"bottom"ip<"clear">>',
		"lengthMenu" : [ 3, 20, 30 ],
		"pageLength" : 3,
		"oLanguage" : {
		"sProcessing" : "正在加载数据...",
		"sSearch" : "搜索:",
		"sLengthMenu" : "_MENU_条记录",
		"sZeroRecords" : "没有查到记录",
		"sInfo" : "第  _START_ 条到第  _END_ 条记录,一共  _TOTAL_ 条记录",
		"sInfoEmpty" : "0条记录",
		"oPaginate" : 
		{
			"sPrevious" : "上一页 ",
			"sNext" : " 下一页",
		}
	},
	"aoColumnDefs" : [
	{
		"bSearchable" : true,
		"bVisible" : false,
		"aTargets" : [ 0 ]
	},
	{
		"aTargets" : [ 1 ],
		"mRender" : function(data,type, full) 
		{
			return "<a href='' onclick='viewUser("+ full[0]+ ")' data-toggle='modal' data-target='#viewModal'>"+ data + "</a>";
		}
	} ],
	"aoColumns" : [
	{
		"sTitle" : "id",
		"bSortable" : false
	},
	{
		"sTitle" : '<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline"><input type="checkbox" id="checkAll" onclick="roleChooseOrNoChoose(this)" /><span></span></label>',
		"bSortable" : false,
		"sWidth" : "70px",
		"sClass" : "text-center",
		"fnCreatedCell" : function(nTd, sData, oData,iRow, iCol) 
		{
			var value = oData[0]+"@@@"+oData[2];
			var content = '<label class="mt-checkbox mt-checkbox-single mt-checkbox-outline"><input type="checkbox" class="roleCheckbox" onchange="recordRoleId(this)" name="'+ oData[2]+ '" value="'+ value+ '" /><span></span></label>';
			$(nTd).html(content);
		}
	}, 
	{
		"sTitle" : "用户名",
		"bSortable" : true,
		"sWidth" : "120px",
		"sClass" : "text-center"
	}, 
	{
		"sTitle" : "创建时间",
		"bSortable" : false,
		"sWidth" : "180px",
		"bAutoWidth" : true,
		"sClass" : "text-center"
	} ],
	// 服务器端，数据回调处理  
	"fnServerData" : function retrieveData(sSource, aoData, fnCallback) 
	{
		aoData.push({"name" : "sname","value" : $('#selectRoleName').val()});
		/*aoData.push({"name":"start","value":$("#start").val()});
		aoData.push({"name":"end","value":$("#end").val()});
		aoData.push({"name":"realName","value":$("#realName").val()});
		aoData.push({"name":"status","value":$("#status").val()});
		aoData.push({"name":"site","value":$("#site").val()}) */
		$.ajax({
			"type" : "POST",
			"url" : sSource,
			"dataType" : "json",
			"contentType" : "application/json",
			"data" : JSON.stringify(aoData),
			"success" : function(data) 
			{
				fnCallback(data);
			}
		});
	}
	});