springmvc + jquery datatable + ajax实现服务端动态分页查询

一、实现目标,如上图所示

二、需要导入的js和css如下

       1、 jquery.dataTables.css 

       2、jquery.js  

       3、 jquery.dataTables.js

三、jsp页面(datatableTest.jsp)

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<%String ctx = request.getContextPath(); %>







Insert title here


       
            
                
                    
                    
                
            
            
            
        
col1col2
       
四、后端代码(DataTableController.java)

package com.ctvit.example.dataTable.web;

import java.util.ArrayList;
import java.util.List;

import net.sf.json.JSONArray;
import net.sf.json.JSONObject;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.ModelAndView;

@Controller
public class DataTableController {

    @RequestMapping("/go-datatable")
    public ModelAndView go_datatable(){
        return new ModelAndView("datatable/datatableTest");
    }
    
    @RequestMapping("/datatable/getAlltable")
    @ResponseBody
    public String getAlltable(@RequestParam String aoData){
        JSONArray jsonarray = JSONArray.fromObject(aoData);
         
        String sEcho = null;
        int iDisplayStart = 0; // 起始索引
        int iDisplayLength = 0; // 每页显示的行数
     
        for (int i = 0; i < jsonarray.size(); i++) {
            JSONObject obj = (JSONObject) jsonarray.get(i);
            if (obj.get("name").equals("sEcho"))
                sEcho = obj.get("value").toString();
     
            if (obj.get("name").equals("iDisplayStart"))
                iDisplayStart = obj.getInt("value");
     
            if (obj.get("name").equals("iDisplayLength"))
                iDisplayLength = obj.getInt("value");
        }
     
        // 生成20条测试数据
        List lst = new ArrayList();
        for (int i = 0; i < 20; i++) {
            String[] d = { "co1_data" + i, "col2_data" + i };
            lst.add(d);
        }
         
        JSONObject getObj = new JSONObject();
        getObj.put("sEcho", sEcho);// 不知道这个值有什么用,有知道的请告知一下
        getObj.put("iTotalRecords", lst.size());//实际的行数
        getObj.put("iTotalDisplayRecords", lst.size());//显示的行数,这个要和上面写的一样
         
        getObj.put("aaData", lst.subList(iDisplayStart,iDisplayStart + iDisplayLength));//要以JSON格式返回
        System.out.println(getObj.toString());
        return getObj.toString();
    }
}




你可能感兴趣的:(springmvc + jquery datatable + ajax实现服务端动态分页查询)