jquery表格插件Datatables的使用学习（一）

为了让查询出的数据具有更好的呈现和交互性，dataTables插件是一个非常好的工具，DataTables是一款jquery表格插件。它是一个高度灵活的工具，可以将任何HTML表格添加高级的交互功能。

首先定义table

<table id="mainTable">
         <thead>
		<tr>
		        <th><input id="checkbox_id_all" name="checkbox_name_all" type="checkbox" value="">全选</th>
			<th>会员名称</th>
			<th>会员电话</th>
		</tr>
	</thead>
	<tbody id="dataList">
	</tbody>
</table>

然后在<script></script>中编写脚本

  /* JQuery表格插件 */
		$("#mainTable").DataTable({                          
			"language":{                           /*  DataTables语言配置选项 */
				"url":langUrl
			},                                         
			"processing":true,                          /* 是否显示正在处理的状态。 */
			"serverSide":true,                         /* 开启Datatables服务器模式 */
			"searching":false,           /* 是否允许Datatables开启本地搜索 */
			"lengthChange":false,           /* 是否允许最终用户改变表格每页显示的记录数 */
			"ordering":false,              /* 是否允许DataTables排序。 */
			"pageLength":15,                  /* 改变初始化页长度（每页多少条数据） */
			
			"ajax":{                       /* 异步获取数据填充到表格显示(ajax) */
				"url":"<c:url value=''/>",
				"data":function(d){
					return $.extend({},d,{
						"entity.name":$("#realName").val()
							});
				}
			},
			"columns":[                          /* 从行数据对象/数组设置列的数据源。 */
				{"data" : "id"},
				{"data" : "name"},
				{"data" : "mobile"},
			],
			/* 设置列定义初始化属性 */
			"columnsDefs":[{
				"render" : function(data,type,row){
					$("#checkbox_id_all").prop("checked",false);
					return "<input type='checkbox' class='memberIds' name='memberIds' value='"+data + "'/>";
				},
				"targets": 0
			}],
			
		});

最后，表格效果

附：DataTables中文网         http://datatables.club/ 

 

点此欢迎光临我的个人网站【一几文星球】

微信公众号，欢迎关注，一起学习。