Datatables

//DataTables-1.10.15
<link
	href='${pageContext.request.contextPath }/datatables/dataTables.bootstrap.min.css'>
	<script type="text/javascript"
	src="${pageContext.request.contextPath }/datatables/jquery-1.11.1.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath }/datatables/jquery.dataTables.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath }/datatables/dataTables.bootstrap.min.js"></script>
	<script type="text/javascript"
	src="${pageContext.request.contextPath }/js/dt.js"></script>

DT自動請求的參數(Sent parameters)

當開啓了 服務器模式時，DataTables 會發送如下參數到服務器

ps:需要說明的是

如果你是 Java 開發者，那麼使用struts2的需要注意，會有錯誤拋出，因爲處理不了類似 columns[i][search][regex]的變量
如果是你 .net 開發者，那麼可能會遇到 maxQueryStringLength 的錯誤
如果是你 php 開發者，那麼恭喜你，php天生支持以上參數的解析，自動轉爲數組，好不公平啊

名稱	類型	描述
`draw`	`integerJS`	繪製計數器。這個是用來確保Ajax從服務器返回的是對應的（Ajax是異步的，因此返回的順序是不確定的）。要求在服務器接收到此參數後再返回（具體看下面）
`start`	`integerJS`	第一條數據的起始位置，比如0代表第一條數據
`length`	`integerJS`	告訴服務器每頁顯示的條數，這個數字會等於返回的 `data`集合的記錄數，可能會大於因爲服務器可能沒有那麼多數據。這個也可能是-1，代表需要返回全部數據(儘管這個和服務器處理的理念有點違背)
`search[value]`	`stringJS`	全局的搜索條件，條件會應用到每一列（ `searchable`需要設置爲 `true` ）
`search[regex]`	`booleanJS`	如果爲 `true`代表全局搜索的值是作爲正則表達式處理，爲 `false`則不是。注意：通常在服務器模式下對於大數據不執行這樣的正則表達式，但這都是自己決定的
`order[i][column]`	`integerJS`	告訴後臺那些列是需要排序的。 `i`是一個數組索引，對應的是 `columns`配置的數組，從0開始
`order[i][dir]`	`stringJS`	告訴後臺列排序的方式， `desc` 降序 `asc`升序
`columns[i][data]`	`stringJS`	columns 綁定的數據源，由 `columns.dataOption` 定義。
`columns[i][name]`	`stringJS`	columns 的名字，由 `columns.nameOption` 定義。
`columns[i][searchable]`	`booleanJS`	標記列是否能被搜索,爲`true`代表可以，否則不可以，這個是由 `columns.searchableOption` 控制
`columns[i][orderable]`	`booleanJS`	標記列是否能排序,爲 `true`代表可以，否則不可以，這個是由 `columns.orderableOption` 控制
`columns[i][search][value]`	`stringJS`	標記具體列的搜索條件
`columns[i][search][regex]`	`booleanJS`	特定列的搜索條件是否視爲正則表達式，如果爲 `true`代表搜索的值是作爲正則表達式處理，爲 `false`則不是。注意：通常在服務器模式下對於大數據不執行這樣的正則表達式，但這都是自己決定的

order[i]和 columns[i]參數發送到服務器是數組信息：

order[i] - 是一個數組，定義了多少列要被排序。比如，數組長度爲1，那麼就只有一個列被排序，否則就是多個列被排序
columns[i] - 是一個數組，定了這個表格裏所有的列

在這兩個情況下，

is an integer which will change to indicate the array value. In most modern server-side scripting environments this data will automatically be available to you as an array.

服務器需要返回的數據(Returned data)

一旦 DataTables 發送了請求，上面的參數就會傳送給服務器，那麼你需要接受到這些參數並做相應的邏輯處理然後按照下面的格式講組裝好的JSON數據返回（不是每個參數都需要接受處理，根據自己的業務需要）

名稱	類型	描述
`draw`	`integerJS`	必要。上面提到了，Datatables發送的draw是多少那麼服務器就返回多少。這裏注意，作者出於安全的考慮，強烈要求把這個轉換爲整形，即數字後再返回，而不是純粹的接受然後返回，這是爲了防止跨站腳本（XSS）攻擊。
`recordsTotal`	`integerJS`	必要。即沒有過濾的記錄數（數據庫裏總共記錄數）
`recordsFiltered`	`integerJS`	必要。過濾後的記錄數（如果有接收到前臺的過濾條件，則返回的是過濾後的記錄數）
`data`	`arrayType`	必要。表中中需要顯示的數據。這是一個對象數組，也可以只是數組，區別在於純數組前臺就不需要用 `columns`綁定數據，會自動按照順序去顯示，而對象數組則需要使用 `columns`綁定數據才能正常顯示。注意這個 `data`的名稱可以由 `ajaxOption` `ajax不定時一講` 的 `ajax.dataSrcOption` `ajax.dataSrc 1不定時一講` `ajax.dataSrc 2不定時一講` 控制
`error`	`stringJS`	可選。你可以定義一個錯誤來描述服務器出了問題後的友好提示

除了上面的返回參數以外你還可以加入下面的參數，來實現對錶格數據的自動綁定

名稱	類型	描述
`DT_RowId`	`stringJS`	自動綁定到 `tr`節點上
`DT_RowClass`	`stringJS`	自動把這個類名添加到 `tr`
`DT_RowData`	`objectJS`	使用 `jQuery.data()` 方法把數據綁定到row中，方便之後用來檢索（比如加入一個點擊事件）
`DT_RowAttr`	`objectJS`	自動綁定數據到 `tr`上，使用 `jQuery.attr()` 方法，對象的鍵用作屬性，值用作屬性的值。注意這個需要 `Datatables 1.10.5+`的版本才支持

如何使用上面的參數，參考下面展示的數據示例

特性(Features)

名稱	說明
`jQueryUIOption`	控制是否使用jquerui的樣式（需要引入jqueryui的css）
`autoWidthOption`	控制Datatables是否自適應寬度
`infoOption`	控制是否顯示錶格左下角的信息
`lengthChangeOption`	是否允許用戶改變表格每頁顯示的記錄數
`orderingOption`	是否允許Datatables開啓排序
`pagingOption`	是否開啓本地分頁
`processingOption`	是否顯示處理狀態(排序的時候，數據很多耗費時間長的話，也會顯示這個)
`scrollXOption`	設置水平滾動
`scrollYOption`	設置垂直滾動
`searchingOption`	是否允許Datatables開啓本地搜索
`serverSideOption`	是否開啓服務器模式
`stateSaveOption`	保存狀態 - 在頁面重新加載的時候恢復狀態（頁碼等內容）
`deferRenderOption`	控制Datatables的延遲渲染，可以提高初始化的速度

數據(Data)

名稱	說明
`ajax.dataOption` `ajax.data不定時一講`	增加或修改通過Ajax提交到服務端的請求數據
`ajax.dataSrcOption` `ajax.dataSrc 1不定時一講` `ajax.dataSrc 2不定時一講`	數據屬性或操作表數據的方法
`ajaxOption` `ajax不定時一講`	從一個ajax數據源讀取數據給表格內容
`dataOption`	用來顯示錶格的數據

案列

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>data tables</title>
<link
	href='${pageContext.request.contextPath }/datatables/dataTables.bootstrap.min.css' rel="stylesheet">
<script type="text/javascript"
	src="${pageContext.request.contextPath }/datatables/jquery-1.11.1.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath }/datatables/jquery.dataTables.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath }/datatables/dataTables.bootstrap.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath }/js/dt.js"></script>
<link
	href='${pageContext.request.contextPath }/bootstrap/css/bootstrap.min.css' rel="stylesheet">
<script type="text/javascript"
	src="${pageContext.request.contextPath }/bootstrap/js/bootstrap.min.js"></script>
</head>
<body>
	<form action='${pageContext.request.contextPath }/delbatch' method='post'>
		<table id="dataTables" class="table table-hover">
			<thead>
				<tr>
					<th><input type="submit" value='批量刪除'></input></th>
					<th>ID</th>
					<th>部門</th>
					<th>用戶名</th>
					<th>密碼</th>
					<th>工號</th>
					<th>性別</th>
					<th>年齡</th>
					<th>權限</th>
					<th>編輯</th>
				</tr>
			</thead>
		</table>
	</form>

</body>
</html>

	// 獲取路徑
	var pathName = window.document.location.pathname;
	// 截取，得到項目名稱
	var projectName = pathName
			.substring(0, pathName.substr(1).indexOf('/') + 1);

$(function() {

	$('#dataTables').DataTable({
//		文檔中的key是加雙引號的
		autoWidth : true,// 控制Datatables是否自適應寬度
		info:true,//控制是否顯示錶格左下角的信息
		lengthChange:false,//是否允許用戶改變表格每頁顯示的記錄數
		ordering:false,//是否開啓排序
		paging : true,//是否開啓本地分頁
		processing:true,//是否顯示處理狀態(排序的時候，數據很多耗費時間長的話，也會顯示這個)
		serverSide:true,//是否開啓服務器模式
		searching:false,//是否允許Datatables開啓本地搜索
		deferRender:true,//控制Datatables的延遲渲染，可以提高初始化的速度
		ajax:{
			url:projectName+"/dt",
			data:{
				username:"jerry",
			}
		},
		//字段值
		columns: [
			{
				"data":function(row,type,val,meta){
					return "<input type='checkbox' name='ids' value='"+row.id+"'></input>";
				}
			},
	        { "data": "id" },
	        { "data": "depID" },
	        { "data": "userName" },
	        { "data": "userPwd" },
	        { "data": "userCode" },
	        { "data": "userSex" },
	        { "data": "userAge" },
	        { "data": "userPower" },
	        {
				"data":function(row,type,val,meta){
					return "<a href='' >修改</a>&nbsp;&nbsp;&nbsp;"+"<a href='"+projectName+"/del?id="+row.id+"' >刪除</a>&nbsp;&nbsp;&nbsp;";
				}
			},
	    ],
	    //顯示信息
	    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": ": 以降序排列此列"
	        }
	    },
	      //初始化結束後的回調函數
	      "initComplete": function(settings, json) {
	    	//alert( '初始化結束後的調用' );
	      },
	      //表格每次重繪回調函數
	      "drawCallback": function( settings ) {
//	          alert( '表格重繪了' );
	      }
	});
});
//function delBatch() {
//	 var ids = new Array;
//     $("input[name='ids']:checked").each(function() {
//         ids.push($(this).val());
//         n = $(this).parents("tr").index() + 1; // 獲取checkbox所在行的順序
//         $("table#dataTables").find("tr:eq(" + n + ")").remove();
//     });
//
//     $.ajax({
//         url : projectName + "/delbatch",
//         data : "ids=" + ids,
//         type : "post",
//         success : function(data) {
//             dataTable.reloadTable();
//         }
//     });
//}

package com.aishang.controller;

import java.io.IOException;
import java.util.Enumeration;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.aishang.domain.User;
import com.aishang.service.UserService;
import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;

/**
 * datatables 分頁案列
 * @param req
 * @param resp
 * @throws IOException
 */
@WebServlet("/dt")
public class DT extends HttpServlet {
	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		response.setContentType("text/html;charset=utf-8");
		System.out.println("dt");
		String username = request.getParameter("username");
		System.out.println(username);
		//datatables 中 讓把draw轉換成int類型
		int draw =request.getParameter("draw")==null?0:Integer.parseInt(request.getParameter("draw"));
		int start =request.getParameter("start")==null?0:Integer.parseInt(request.getParameter("start"));
		int length =request.getParameter("length")==null?0:Integer.parseInt(request.getParameter("length"));
		System.out.println("draw="+draw);//1
		System.out.println("start="+start);//0
		System.out.println("length="+length);//10
		
		UserService userService = new UserService();
		User user = new User();
		List<User> userList = userService.page(user,start,length);
		//recordsTotal  沒有過濾的記錄數（數據庫裏總共記錄數）
		//recordsFiltered 過濾後的記錄數（如果有接收到前臺的過濾條件，則返回的是過濾後的記錄數）
		/*
		 * data
		 * 表中中需要顯示的數據。這是一個對象數組，
		 * 也可以只是數組，區別在於 純數組前臺就不需要用 
		 * columns綁定數據，會自動按照順序去顯示 ，
		 * 而對象數組則需要使用 columns綁定數據才能正常顯示。
		 * 注意這個 data的名稱可以由 ajaxOption
		 * ajax不定時一講 的 ajax.dataSrcOption
		 * ajax.dataSrc 1
		 * ajax.dataSrc 2
		 * 控制
		 */

		int rowCount = userService.getRowCount(user);
		Map<String, Object> map = new HashMap<String, Object>();
		map.put("draw", draw);
		map.put("recordsTotal", rowCount);
		map.put("recordsFiltered", rowCount);
		map.put("data", userList);
		
		JSONObject json = new JSONObject(map);
		String jsonString = JSON.toJSONString(json);
		System.out.println(jsonString);
		response.getWriter().print(jsonString);
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

package com.aishang.controller;

import java.io.IOException;
import java.util.Enumeration;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.aishang.domain.User;
import com.aishang.service.UserService;
import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;

/**
 * datatables 分頁案列
 * 
 * @param req
 * @param resp
 * @throws IOException
 */
@WebServlet("/del")
public class Del extends HttpServlet {
	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		response.setContentType("text/html;charset=utf-8");
		// 刪除
		String id = request.getParameter("id");
		if (id != null) {
			System.out.println("id=" + id);
		}
		response.sendRedirect("/1907s/dt.jsp");
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

package com.aishang.controller;

import java.io.IOException;
import java.util.Enumeration;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.aishang.domain.User;
import com.aishang.service.UserService;
import com.alibaba.fastjson.JSON;
import com.alibaba.fastjson.JSONObject;

/**
 * datatables 分頁案列
 * 
 * @param req
 * @param resp
 * @throws IOException
 */
@WebServlet("/delbatch")
public class DelBatch extends HttpServlet {
	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		response.setContentType("text/html;charset=utf-8");
		System.out.println("delbatch");
		String[] ids = request.getParameterValues("ids");
		if (ids!=null) {
			for (String sid : ids) {
				System.out.println("批量刪除的id"+sid);
			}
		}
		response.sendRedirect("/1907s/dt.jsp");
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		// TODO Auto-generated method stub
		doGet(request, response);
	}

}

笛卡爾積__Windiness

發佈了26 篇原創文章 · 獲贊 8 · 訪問量 1萬+

私信關注

DataTables分頁插件

Datatables

DT自動請求的參數(Sent parameters)

服務器需要返回的數據(Returned data)

特性(Features)

數據(Data)

案列

實現網頁全屏的5種方式

Uncaught TypeError: Cannot read property 'DYMC' of null

H5-websocket實戰案例

nodejs-shelljs模塊

js函數進階

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結