欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

jquery datatable服務(wù)端分頁

 更新時(shí)間：2021年10月15日 09:30:56   作者：u014284922  
這篇文章主要為大家詳細(xì)介紹了jquery datatable服務(wù)端分頁，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

OK，上次完成了客戶端的分頁，這次我們就在上一次的Demo上進(jìn)行修改，來實(shí)現(xiàn)服務(wù)端的分頁。

js代碼：

<script type="text/javascript">
$(document).ready(function() {
 $('#table_id_example').DataTable({
 "bProcessing" : false, //是否顯示加載
 "sAjaxSource" : '/datatableDemo/user/json', //請(qǐng)求資源路徑
 "serverSide": true, //開啟服務(wù)器處理模式
 /*
 使用ajax，在服務(wù)端處理數(shù)據(jù)
 sSource:即是"sAjaxSource"
 aoData:要傳遞到服務(wù)端的參數(shù)
 fnCallback:處理返回?cái)?shù)據(jù)的回調(diào)函數(shù)
 */
 "fnServerData": function(sSource, aoData, fnCallback){
 $.ajax( { 
 'type' : 'post', 
 "url": sSource, 
 "dataType": "json", 
 "data": { "aodata" : JSON.stringify(aoData) },
 "success": function(resp) { 
  fnCallback(resp);
 } 
 }); 
 }, 
 "columns" : [ 
 { data : "id" }, 
 { data : "name" }, 
 { data : "age" }, 
 ]
 });
})
</script>

開啟服務(wù)器處理模式，這時(shí)我們對(duì)表格的每次操作，datatable都會(huì)幫我們向服務(wù)器發(fā)起請(qǐng)求獲取數(shù)據(jù)，默認(rèn)是用GET方式傳遞參數(shù)，所以我們下面加上了”fnServerData”，這樣可以修改參數(shù)傳遞的方式為POST，那么到底給服務(wù)端發(fā)送的”aoData”是個(gè)什么鬼呢，別急，我們直接從Servlet取出來看看就知道了
此時(shí)我們的Servlet也要做一點(diǎn)修改：

public class Action extends HttpServlet {

 /**
 * 
 */
 private static final long serialVersionUID = 5957315496919679612L;

 @Override
 protected void service(HttpServletRequest request, HttpServletResponse response)
 throws ServletException, IOException {
 // 編碼設(shè)置
 request.setCharacterEncoding("UTF-8");
 response.setContentType("text/html; charset=UTF-8");
 response.setCharacterEncoding("UTF-8");

 // 把傳送過來的JSON字符串轉(zhuǎn)成JSON數(shù)組
 JSONArray ja = JSONArray.fromObject(request.getParameter("aodata"));
 System.out.println(ja);

 // 從數(shù)據(jù)庫獲取數(shù)據(jù)
 List<User> listUser = Service.getInstance().getAll();

 // 數(shù)據(jù)封裝并返回給客戶端
 DataTableJSONResponse dtjs = new DataTableJSONResponse(listUser);
 JSONObject jsonObject = JSONObject.fromObject(dtjs);
 response.getWriter().print(jsonObject.toString());
 }

此時(shí)我們運(yùn)行一下，OK，發(fā)現(xiàn)所謂的參數(shù)長這個(gè)模樣

[{“name”:”sEcho”,”value”:1}, 
{“name”:”iColumns”,”value”:3}, 
{“name”:”sColumns”,”value”:”,,”}, 
{“name”:”iDisplayStart”,”value”:0}, 
{“name”:”iDisplayLength”,”value”:10}, 
{“name”:”mDataProp_0”,”value”:”id”}, 
{“name”:”sSearch_0”,”value”:”“}, 
{“name”:”bRegex_0”,”value”:false}, 
{“name”:”bSearchable_0”,”value”:true}, 
{“name”:”bSortable_0”,”value”:true}, 
{“name”:”mDataProp_1”,”value”:”name”}, 
{“name”:”sSearch_1”,”value”:”“}, 
{“name”:”bRegex_1”,”value”:false}, 
{“name”:”bSearchable_1”,”value”:true}, 
{“name”:”bSortable_1”,”value”:true}, 
{“name”:”mDataProp_2”,”value”:”age”}, 
{“name”:”sSearch_2”,”value”:”“}, 
{“name”:”bRegex_2”,”value”:false}, 
{“name”:”bSearchable_2”,”value”:true}, 
{“name”:”bSortable_2”,”value”:true}, 
{“name”:”sSearch”,”value”:”“}, 
{“name”:”bRegex”,”value”:false}, 
{“name”:”iSortCol_0”,”value”:0}, 
{“name”:”sSortDir_0”,”value”:”asc”}, 
{“name”:”iSortingCols”,”value”:1}]

 是不是感覺有點(diǎn)晦澀難懂，于是本菜上網(wǎng)查了下，勉強(qiáng)是看懂這個(gè)鬼東西，接下來就講解一下幾個(gè)我們需要的參數(shù)：
sEcho：客戶端發(fā)送請(qǐng)求同時(shí)發(fā)送過來的一個(gè)標(biāo)識(shí)，雖然有什么卵用不知道，不過我們服務(wù)端返回的數(shù)據(jù)中必須帶有這個(gè)標(biāo)識(shí)，哦，官網(wǎng)的文檔里說，服務(wù)端取出標(biāo)識(shí)最好轉(zhuǎn)一下轉(zhuǎn)成int，防止XXS攻擊（懵逼，暫且不管，我們只知道需要這個(gè)就行）
iColumns：列數(shù)
iDisplayStart：起始索引
iDisplayLength：顯示的行數(shù)
{“name”:”mDataProp_0”,”value”:”id”},
{“name”:”sSearch_0”,”value”:”“},
{“name”:”bRegex_0”,”value”:false},
{“name”:”bSearchable_0”,”value”:true},
{“name”:”bSortable_0”,”value”:true}

每一列的參數(shù)設(shè)置，_0即是第一列，這個(gè)我們不管，到下面也是提取列名而已
sSearch：全局搜索字段
iSortCol_0：被排序的列
sSortDir_0：排序方式

完成了參數(shù)解讀，那么接下來就要提取我們的參數(shù)啦~~開工加代碼

public class Action extends HttpServlet {

 /**
 * 
 */
 private static final long serialVersionUID = 5957315496919679612L;

 @Override
 protected void service(HttpServletRequest request, HttpServletResponse response)
 throws ServletException, IOException {
 // 編碼設(shè)置
 request.setCharacterEncoding("UTF-8");
 response.setContentType("text/html; charset=UTF-8");
 response.setCharacterEncoding("UTF-8");

 // 把傳送過來的JSON字符串轉(zhuǎn)成JSON數(shù)組
 JSONArray ja = JSONArray.fromObject(request.getParameter("aodata"));
 System.out.println(ja);

 // 獲取需要的參數(shù)值
 String sEcho = null;
 Integer iColumns = null;
 Integer iDisplayStart = null;
 Integer iDisplayLength = null;
 List<String> mDataProp = new ArrayList<String>(); //存放列名
 String sSearch = null;
 Integer iSortCol_0 = null;
 String iSortCol = null;
 String sSortDir_0 = null;
 for (int i = 0; i < ja.size(); i++) {
 if (ja.getJSONObject(i).getString("name").equals("sEcho"))
 sEcho = ja.getJSONObject(i).getString("value");
 else if (ja.getJSONObject(i).getString("name").equals("iColumns"))
 iColumns = Integer.valueOf(ja.getJSONObject(i).getString("value"));
 else if (ja.getJSONObject(i).getString("name").equals("iDisplayStart"))
 iDisplayStart = Integer.valueOf(ja.getJSONObject(i).getString("value"));
 else if (ja.getJSONObject(i).getString("name").equals("iDisplayLength"))
 iDisplayLength = Integer.valueOf(ja.getJSONObject(i).getString("value"));
 else if (ja.getJSONObject(i).getString("name").equals("sSearch"))
 sSearch = ja.getJSONObject(i).getString("value");
 else if (ja.getJSONObject(i).getString("name").equals("iSortCol_0"))
 iSortCol_0 = Integer.valueOf(ja.getJSONObject(i).getString("value"));
 else if (ja.getJSONObject(i).getString("name").equals("sSortDir_0"))
 sSortDir_0 = ja.getJSONObject(i).getString("value");
 else if (iColumns != null) {
 for (int j = 0; j < iColumns; j++)
  if (ja.getJSONObject(i).getString("name").equals("mDataProp_" + j))
  mDataProp.add(ja.getJSONObject(i).getString("value"));
 }
 }
 iSortCol = mDataProp.get(iSortCol_0);
 System.out.println(sEcho);
 System.out.println(iColumns);
 System.out.println(iDisplayStart);
 System.out.println(iDisplayLength);
 System.out.println(sSearch);
 System.out.println(iSortCol);
 System.out.println(sSortDir_0);

 // 從數(shù)據(jù)庫獲取數(shù)據(jù)
 List<User> listUser = Service.getInstance().getAll();

 // 數(shù)據(jù)封裝并返回給客戶端
 DataTableJSONResponse dtjs = new DataTableJSONResponse(listUser);
 JSONObject jsonObject = JSONObject.fromObject(dtjs);
 response.getWriter().print(jsonObject.toString());
 }

好的，加工完畢，這時(shí)我們跑一跑看看是不是打出我們要的參數(shù)，這里我就不貼出來了，你們自己跑了看，好的發(fā)現(xiàn)拿到了我們要的參數(shù)，那么接下來可以拼接我們的sql語句了，同時(shí)我們要對(duì)我們的DataTableJSONResponse進(jìn)行一下小小的修改，因?yàn)檫@里對(duì)于返回的數(shù)據(jù)也是有參數(shù)要求的，那我們就把需要的參數(shù)放進(jìn)去，代碼如下：

public class DataTableJSONResponse {
 Object sEcho;
 Object iTotalRecords; //查詢的記錄數(shù)
 Object iTotalDisplayRecords; //過濾后的記錄數(shù)
 Object aaData;

 public DataTableJSONResponse() {
 super();
 }

 public DataTableJSONResponse(Object aaData) {
 super();
 this.aaData = aaData;
 }

 public DataTableJSONResponse(Object sEcho, Object iTotalRecords, Object iTotalDisplayRecords, Object aaData) {
 super();
 this.sEcho = sEcho;
 this.iTotalRecords = iTotalRecords;
 this.iTotalDisplayRecords = iTotalDisplayRecords;
 this.aaData = aaData;
 }

 public Object getAaData() {
 return aaData;
 }

 public void setAaData(Object aaData) {
 this.aaData = aaData;
 }

 public Object getsEcho() {
 return sEcho;
 }

 public void setsEcho(Object sEcho) {
 this.sEcho = sEcho;
 }

 public Object getiTotalRecords() {
 return iTotalRecords;
 }

 public void setiTotalRecords(Object iTotalRecords) {
 this.iTotalRecords = iTotalRecords;
 }

 public Object getiTotalDisplayRecords() {
 return iTotalDisplayRecords;
 }

 public void setiTotalDisplayRecords(Object iTotalDisplayRecords) {
 this.iTotalDisplayRecords = iTotalDisplayRecords;
 }
}

完整的Servlet：

public class Action extends HttpServlet {

 /**
 * 
 */
 private static final long serialVersionUID = 5957315496919679612L;

 @Override
 protected void service(HttpServletRequest request, HttpServletResponse response)
 throws ServletException, IOException {
 // 編碼設(shè)置
 request.setCharacterEncoding("UTF-8");
 response.setContentType("text/html; charset=UTF-8");
 response.setCharacterEncoding("UTF-8");

 // 把傳送過來的JSON字符串轉(zhuǎn)成JSON數(shù)組
 JSONArray ja = JSONArray.fromObject(request.getParameter("aodata"));

 // 獲取需要的參數(shù)值
 String sEcho = null;
 Integer iColumns = null;
 Integer iDisplayStart = null;
 Integer iDisplayLength = null;
 List<String> mDataProp = new ArrayList<String>(); //存放列名
 String sSearch = null;
 Integer iSortCol_0 = null;
 String iSortCol = null;
 String sSortDir_0 = null;
 for (int i = 0; i < ja.size(); i++) {
 if (ja.getJSONObject(i).getString("name").equals("sEcho"))
 sEcho = ja.getJSONObject(i).getString("value");
 else if (ja.getJSONObject(i).getString("name").equals("iColumns"))
 iColumns = Integer.valueOf(ja.getJSONObject(i).getString("value"));
 else if (ja.getJSONObject(i).getString("name").equals("iDisplayStart"))
 iDisplayStart = Integer.valueOf(ja.getJSONObject(i).getString("value"));
 else if (ja.getJSONObject(i).getString("name").equals("iDisplayLength"))
 iDisplayLength = Integer.valueOf(ja.getJSONObject(i).getString("value"));
 else if (ja.getJSONObject(i).getString("name").equals("sSearch"))
 sSearch = ja.getJSONObject(i).getString("value");
 else if (ja.getJSONObject(i).getString("name").equals("iSortCol_0"))
 iSortCol_0 = Integer.valueOf(ja.getJSONObject(i).getString("value"));
 else if (ja.getJSONObject(i).getString("name").equals("sSortDir_0"))
 sSortDir_0 = ja.getJSONObject(i).getString("value");
 else if (iColumns != null) {
 for (int j = 0; j < iColumns; j++)
  if (ja.getJSONObject(i).getString("name").equals("mDataProp_" + j))
  mDataProp.add(ja.getJSONObject(i).getString("value"));
 }
 }
 iSortCol = mDataProp.get(iSortCol_0);

 String sql = null;
 if(sSearch.equals(""))
 sql = "select * from(select id,name,age,rownum rn from dtdemo_xxx)"
 +"where rn between " + iDisplayStart + " and " + (iDisplayStart+iDisplayLength)
 +" order by " + iSortCol + " " + sSortDir_0;
 else
 sql = "select * from(select id,name,to_char(age,999) age,rownum rn from dtdemo_xxx where id like '%"
 + sSearch +"%' or name like '%"+ sSearch +"%' or age like '%"+ sSearch +"%')"
 +"where rn between " + iDisplayStart + " and " + (iDisplayStart+iDisplayLength)
 +" order by " + iSortCol + " " + sSortDir_0;
 System.out.println(sql);

 // 從數(shù)據(jù)庫獲取數(shù)據(jù)
 List<User> listUser = Service.getInstance().getAll(sql);
 //獲取記錄數(shù)
 int size = Service.getInstance().getAll().size();

 // 數(shù)據(jù)封裝并返回給客戶端
 DataTableJSONResponse dtjs = new DataTableJSONResponse(sEcho,size,size,listUser);
 JSONObject jsonObject = JSONObject.fromObject(dtjs);
 response.getWriter().print(jsonObject.toString());
 }

}

至此，服務(wù)端分頁完成。

精彩專題分享：jquery分頁功能操作JavaScript分頁功能操作

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論