一.    開發執行平臺

    1.    Eclipse JavaEE IDE Mars.2 Release(4.5.2)

二.    開發執行工具

    1.    JDK 1.7

    2.    Apache Tomcat 7.0

三.    涉及主要技術

    1.    JQuery 3.3.1

    2.    AJAX

    2.    Bootstrap 3.3.7

    3.    JAVAEE

    4.    datatables外掛

    5.    MySQL

    6.    Durid資料庫連線池

四.    專案簡介

    1.    專案包括對使用者的增刪改查，表格將前端操作的過濾條件和排序方式提交到後臺，經過MySQL資料庫查詢，將過濾的查詢結果按照指定列的指定排序方式返回到前端的

五.    DatatablesDemo專案核心程式碼

    1.    MySQL資料庫（t_user表）

CREATE TABLE `t_user` (
    `user_id` varchar(255) NOT NULL DEFAULT '',
    `user_name` varchar(255) DEFAULT '',
    `user_pwd` varchar(255) DEFAULT '',
    PRIMARY KEY (`user_id`)
) ENGINE=InnoDB DEFAULT CHARSET=utf8;

    2.    pom.xml（專案依賴類）

<dependencies>
    <!-- 單元測試 -->
    <dependency>
        <groupId>junit</groupId>
        <artifactId>junit</artifactId>
        <version>4.12</version>
        <scope>test</scope>
    </dependency>
    <!-- 阿里的資料庫連線池 -->
    <dependency>
        <groupId>com.alibaba</groupId>
        <artifactId>druid</artifactId>
        <version>1.1.9</version>
    </dependency>
    <!-- JSON -->
    <dependency>
        <groupId>net.sf.json-lib</groupId>
        <artifactId>json-lib</artifactId>
        <version>2.4</version>
        <classifier>jdk13</classifier>
    </dependency>
    <!-- MySQL驅動 -->
    <dependency>
        <groupId>mysql</groupId>
        <artifactId>mysql-connector-java</artifactId>
        <version>5.1.29</version>
    </dependency>
</dependencies>
 

    3.    index.html（使用者操作頁面）

<!-- 操作盒子 -->
<div class="operate-box">
	<button type="button" id="insertUser" class="btn btn-primary">
		<i class="fa fa-plus"></i>
		新增使用者
	</button>
	<button type="button" id="refresh" class="btn btn-primary">
		<i class="fa fa-refresh"> 重新整理使用者列表</i>
	</button>
</div>
<!-- 查詢使用者列表  -->
<div class="find">
	<table id="findUserList" class="table table-striped table-bordered table-hover dataTable no-footer">
	</table>
</div>

    4.    index.js（datatables表格配置）

// 查詢使用者列表
var table = $("#findUserList").dataTable({
	// 是否使用伺服器端處理模式（依賴paging）
	"serverSide" : true,
	// 是否分頁
	"paging" : true,
	// 是否顯示每頁多少條記錄下拉框（依賴paging）
	"lengthChange" : true,
	// 完整頁數按鈕
	"pagingType" : "full_numbers",
	// 是否顯示左下角資訊
	"info" : true,
	// 自定義分頁長度
	"lengthMenu" : [[10, 20, 30, -1], ["10", "20", "35", "全部"]],
	// 是否使用排序
	"ordering" : true,
	// 是否使用搜索
	"searching" : true,
	// 是否自動計算列寬
	"autoWidth" : false,
	// 是否顯示處理狀態
	"processing" : true,
	// 是否水平滾動
	"scrollX" : false,
	// 是否垂直滾動（依賴paging）
	"scrollY" : false,
	// 是否延遲渲染
	"deferRender" : true,
	// 是否顯示過濾資訊
	"filter" : true,
	// 國際化配置
	"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" : ": 以降序排列此列"
		}
	},
	// 非同步請求
	"ajax" : {
		"url" : getBasePath() + "FindUserList",
		"type" : "POST",
		"dataType" : "json",
		"dataFilter" : function(result) {
			var json = JSON.parse(result);
			var returnData = {};
			returnData.draw = json.dataTable.draw;
			returnData.recordsTotal = json.dataTable.recordsTotal;
			returnData.recordsFiltered = json.dataTable.recordsFiltered;
			returnData.data = json.dataTable.data;
			return JSON.stringify(returnData);
		}
	},
	// 列描述
	"columns" : [{
		"title" : "使用者編號",
		"type" : "html",
		"data" : "userId",
		"defaultContent" : "",
		"visible" : true
	}, {
		"title" : "使用者名稱",
		"type" : "html",
		"data" : "userName",
		"defaultContent" : "",
		"visible" : true
	}, {
		"title" : "使用者密碼",
		"type" : "html",
		"data" : "userPwd",
		"defaultContent" : "",
		"visible" : true
	}, {
		"title" : "操作",
		"type" : "html",
		"data" : null,
		"defaultContent" : "",
		"visible" : true
	}],
	// 最後列描述
	"columnDefs" : [{
		"targets" : -1,
		"render" : function(data, type, full, meta) {
			var ret = "<button class = \"btn btn-primary\" id=\"updateUser\"><i class=\"fa fa-edit\"></i>  修改使用者</button><button id=\"deleteUser\" class = \"btn btn-danger\"\"><i class=\"fa fa-minus\"></i>  刪除使用者</button>"
			return ret;
		}
	}]
}).api();

    5.    FindUserList.java（接收分頁，搜尋過濾，排序等請求引數並響應）

// 設定請求響應格式
request.setCharacterEncoding("UTF-8");
response.setHeader("Content-Type", "application/json;charset=UTF-8");
// 封裝分頁請求包
DatatablesRequestUtils datatablesRequest = new DatatablesRequestUtils(request);
// 繪製計數器
int draw = datatablesRequest.getDraw();
// 表格過濾後資料
List<User> userList = userService.findUserList(datatablesRequest);
// 表格總記錄數
int recordsTotal = userService.findUserCount(null);
// 表格過濾後總記錄數
int recordsFiltered = userService.findUserCount(datatablesRequest);
// 封裝分頁響應包
DatatablesResponseUtils<User> dataTablesResponse = new DatatablesResponseUtils<User>();
dataTablesResponse.setDraw(draw);
dataTablesResponse.setRecordsTotal(recordsTotal);
dataTablesResponse.setRecordsFiltered(recordsFiltered);
dataTablesResponse.setData(userList);
JSONObject json = new JSONObject();
json.put("dataTable", dataTablesResponse);
PrintWriter pw = response.getWriter();
pw.write(json.toString());
pw.close();

六.    專案原始碼