JQuery Datatable展示列表数据

1、JSP页面head标签中需要引入的JQuery，Bootstrap，JQuery Datatable依赖。这里给一个外网的地址，东西还是很全面的。

https://www.bootcdn.cn/datatables/

 下面的是需要引入的组件外网地址。

<!-- 加载JQuery，注意先后顺序，JQuery一定是第一位加载的 -->
<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>

<!-- 加载Bootstrap -->
<script type="text/javascript" src="https://cdn.bootcss.com/datatables/1.10.19/js/dataTables.bootstrap.min.js"></script>

<!-- 加载JQuery Datatable -->
<script type="text/javascript" src="https://cdn.bootcss.com/datatables/1.10.19/js/jquery.dataTables.min.js"></script>

<link href="https://cdn.bootcss.com/datatables/1.10.19/css/dataTables.bootstrap.min.css" type="text/css" rel="stylesheet" />
<link href="https://cdn.bootcss.com/datatables/1.10.19/css/jquery.dataTables.min.css" type="text/css" rel="stylesheet" />

2、DIV中加入下面的代码。

<div class="row">
    <table id="simple" class="table dataTable">
		<thead>
			<tr class="active"><!-- 这里的active是为了让表头有背景颜色 -->
			    <th class="td_text_left">序号</th>
			    <th class="td_text_left">姓名</th>
			    <th class="td_text_left">操作</th>
			</tr>
		</thead>
	</table>
</div>

3、页面中封装一个列表数据的方法，便于新增，删除，编辑，查询后刷新列表数据

// 列表数据
function table_data_init() {
    // simple是DIV中给table定义的ID，注意页面中如果有多个table，必须保证ID不一样
	$("#simple").dataTable({
		"bPaginate": true, //不分页false
		"bLengthChange": false,
		"bFilter": false,
		"bSort": false,
		"bAutoWidth": true,
		"contentType": "application/json",
		"dataType": "json",
		"sScrollX": true,// 水平滚动条
		"sScrollY": table_height,// 高度自己计算，超过会出现竖向滚动条
		"bProcessing": true,
		"iDisplayLength": perPageNum,// 每页显示条数，默认10条
		"bServerSide": true,
		"sAjaxSource": getContext() + "/user/list",// 后台接口的地址
		"sServerMethod": "POST",// post请求方式
		"fnPreDrawCallback":function(oSettings){
            // 第二页分页累计增加，第一页展示1-10，第二页从11-20
            // 如果第二页还是展示1-10的序号，就不需要这个方法
            pageStartNum = parseInt(oSettings._iDisplayStart);
        },
		"fnDrawCallback": function(oSettings) {
            // 第二页分页累计增加
			pageStartNum = parseInt(oSettings.iDraw);
			$("#simple_paginate").append("<input style='height:36px;line-height:36px;width:38px;margin-left:20px;'  onkeyup=\"(this.v=function(){this.value=this.value.replace(/[^0-9-]+/,'');}).call(this)\" onblur=\"this.v();\" maxLength='11' class='margin text-center' id='changePage' type='text'><div class='btn btn-default' style='width:38px;height:36px;border-radius: 0px;border-left: 0px solid red;' id='dataTable-btn'>go</div>");
			var oTable = $("#simple").dataTable();
			$('#dataTable-btn').click(function(e) {
				if($("#changePage").val() && $("#changePage").val() > 0) {
					var redirectpage = $("#changePage").val() - 1;
				} else {
					var redirectpage = 0;
				}
				oTable.fnPageChange(redirectpage);
			});
		},
		"aoColumns": [{
				"title": "序号",
				'data':'id',
				"width":"60px",
				"sClass": "td_text_left",
				mRender:function(data,type,row,iDataIndex){
					if(data == null || data == '' || data == undefined){
						return '';
					}
                    // 如果每页序号都是1-10，那么直接使用iDataIndex.row+1就可以
					return '<div style=\"width:60px;padding-left:4px;\" >'+(pageStartNum+iDataIndex.row+1)+'<span data-bhid="+row.id+"></span></div>';
				}
			},
			{
				"title": "姓名",
				"data": "name",
				"width":"200px",
				"sClass": "td_text_left",
				"mRender": function(data, type, row, iDataIndex) {
					if(data == null || data == '' || data == undefined){
						return '';
					}
					return "<div class=\"myWidth200\" title='"+data+"'>"+ data +"</div>";
					}
			},
			{
				"title": "操作",
				"data": "dl_cd",
				"width":"50px",
				"sClass": "td_text_left",
				"mRender": function(data, type, row, iDataIndex) {
					var html = "<div class=\"myWidth50\"><a style=\"color:#3897F1;\" data-toggle=\"modal\" id=\"deleteBtn\" data-id=\""+row.id+"\" data-target=\"#stack3\" href=\"javascript:;\" >删除</a></div>";
					return html;
				}
			}
		],
		"oLanguage": {
			"sLengthMenu": "显示 _MENU_ 条记录",
			"sProcessing": "<img src=\"" + getContext() + "/images/load.gif" + "\" />加载中...",
			"sSearch": "搜索:",
			"sInfo": "显示第 _START_ - _END_ 条记录，共 _TOTAL_ 条",
			"sInfoEmpty": "显示第 0 条记录，共 0 条",
			"sZeroRecords": "没有查询到相关的结果",
			"oPaginate": {
				"sFirst": "首页",
				"sPrevious": "前一页",
				"sNext": "后一页",
				"sLast": "尾页"
			}
		},
		"fnServerParams": function(aoData) {
            // 用户名模糊查询
			aoData.push(
					{
						name: "userName",
						value: $("#userName").val()
					}
			);
			return JSON.stringify(aoData);
		}
	});
}

4、后台返回的JSON格式如下。

{
	"errorText": "操作成功",
	"iTotalRecords": 2,
	"aaData": [{
		"id": "1",
		"name": "张三"
	}, {
		"id": "2",
		"name": "李四"
	}],
	"iTotalDisplayRecords": 2,
	"errorCode": "success",
	"sEcho": "",
	"iDisplayStart": 0
}

5、展示的结果如下。

 

 

下面给一个JQuery Datatable的 API地址。

https://www.cnblogs.com/amoniyibeizi/p/4548111.html