您的位置：首页 > Web前端 > JQuery

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

2015-07-31 09:05 1016 查看

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

二、需要导入的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(); %>
<!DOCTYPE>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script src="${ctx }datatable/js/jquery.js"></script>
<script src="${ctx }datatable/js/jquery.dataTables.js"></script>
<link rel="stylesheet" href="${ctx }datatable/css/jquery.dataTables.css" type="text/css">
<title>Insert title here</title>
</head>
<body>
       <table id="tb" class="display">
            <thead>
                <tr>
                    <th>col1</th>
                    <th>col2</th>
                </tr>
            </thead>
            <tbody>
            </tbody>
        </table>
        <script type="text/javascript">
        $(document).ready(function() {
            $("#tb").dataTable({
                "bProcessing": false, // 是否显示取数据时的那个等待提示
                "bServerSide": true,//这个用来指明是通过服务端来取数据
                "sAjaxSource": "${ctx}datatable/getAlltable",//这个是请求的地址
                "fnServerData": retrieveData // 获取数据的处理函数
            });
        });

        // 3个参数的名字可以随便命名,但必须是3个参数,少一个都不行
        function retrieveData( sSource111,aoData111, fnCallback111) {
            $.ajax({
                url : sSource111,//这个就是请求地址对应sAjaxSource
                data : {"aoData":JSON.stringify(aoData111)},//这个是把datatable的一些基本数据传给后台,比如起始位置,每页显示的行数
                type : 'post',
                dataType : 'json',
                async : false,
                success : function(result) {
                    fnCallback111(result);//把返回的数据传给这个方法就可以了,datatable会自动绑定数据的
                },
                error : function(msg) {
                }
            });
        }
    </script>
</body>
</html>
四、后端代码（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<String[]> lst = new ArrayList<String[]>();
        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();
   }
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航