[jQuery]EasyUI中DataGrid獲取數據並分頁

時間 2019-11-07

標籤 jquery easyui datagrid 獲取數據分頁欄目 JQuery 简体版

原文原文鏈接

首先是頁面代碼：javascript

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    
    <title>表格信息</title>
    
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
    <link rel="stylesheet" type="text/css" href="js/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="js/themes/icon.css">

    <script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="js/jquery.easyui.min.js"></script>
    
    <script type="text/javascript">
        $(function(){
            $("#myTable").datagrid({
                title: "表單數據",
                width: 550,
                height: 260,
                collapsible: true,
                url: "GetDataGridServlet",
                method: 'POST',
                sortName: 'title',
                loadMsg: "數據加載中...",
                pageSize: 5,
                pageList : [5, 10],
                pagination:true,
                striped: true,
                
                columns:[[
                    {title: '姓名', field: 'name', width: 100, align: 'center'},
                    {title: '性別', field: 'sex', width: 50, align: 'center'},
                    {title: '年齡', field: 'age', width: 50, align: 'center'},
                    {title: '出生日期', field: 'birthday', width: 200, align: 'center'}
                ]]
            });
            
            var p = $('#myTable').datagrid('getPager');  
                $(p).pagination({  
                beforePageText: '第',//頁數文本框前顯示的漢字  
                afterPageText: '頁    共 {pages} 頁',  
                displayMsg: '當前顯示 {from} - {to} 條記錄   共 {total} 條記錄'
            });  
        });
    </script>

  </head>
  
  <body>
        <div style="padding: 30px">
            <table id="myTable"></table>
        </div>
        
  </body>
</html>

Servlet css

public class GetDataGridServlet extends HttpServlet {
    
    private EasyUIDao dao = new EasyUIDaoImpl();

    public void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        this.doPost(request, response);
    }

    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        int pageSize = Integer.parseInt(request.getParameter("page"));
        int rows = Integer.parseInt(request.getParameter("rows"));
        System.out.println("pageSize: " + pageSize);
        System.out.println("rows: " + rows);
        int total = dao.getAllStudentsCounts();
        ArrayList<Student> data = dao.getAllStudents4DataGrid((pageSize - 1) * rows + 1 , pageSize * rows);
        String json = EasyUIUtil.stringToJSON(total, data);
        response.setContentType("text/html;charset=UTF-8");
        PrintWriter out = response.getWriter();
        out.write(json);
        out.flush();
        out.close();
    }

}

jdbc實現數據獲取html

package com.wisher.easyui.dao.impl;

import java.sql.Connection;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.sql.SQLException;
import java.util.ArrayList;

import com.wisher.db.DBConnection;
import com.wisher.easyui.bean.Student;
import com.wisher.easyui.dao.EasyUIDao;

public class EasyUIDaoImpl implements EasyUIDao {
    
    private Connection conn;
    private PreparedStatement pstmt;
    private ResultSet rs;

    public ArrayList<Student> getAllStudents4DataGrid(int start, int end) {
        ArrayList<Student> list = new ArrayList<Student>();
        
        StringBuffer sql = new StringBuffer("SELECT * FROM ");
        sql.append("(SELECT A.*, ROWNUM RN FROM (SELECT * FROM TB_EASYUI_STUDENT) A WHERE ROWNUM <= ?) ");
        sql.append("WHERE RN >= ?");
        
        try {
            conn = DBConnection.getConnectionInstance();
            pstmt = conn.prepareStatement(sql.toString());
            pstmt.setInt(1, end);
            pstmt.setInt(2, start);
            
            rs = pstmt.executeQuery();
            
            while(rs.next()) {
                Student student = new Student();
                student.setName(rs.getString("NAME"));
                student.setSex(rs.getString("SEX"));
                student.setAge(rs.getInt("AGE"));
                student.setBirthday(rs.getDate("BIRTHDAY"));
                list.add(student);
            }
        } catch (SQLException e) {
            list = null;
            e.printStackTrace();
        } finally {
            if(pstmt != null) {
                try {
                    pstmt.close();
                    pstmt = null;
                } catch (SQLException e) {
                    e.printStackTrace();
                }
            }
            
            if(rs != null) {
                try {
                    rs.close();
                    rs = null;
                } catch (SQLException e) {
                    e.printStackTrace();
                }
            }
        }
        
        return list;
    }
    
    public int getAllStudentsCounts() {
        int total = 0;
        
        StringBuffer sql = new StringBuffer("SELECT COUNT(*) FROM TB_EASYUI_STUDENT");
        
        try {
            conn = DBConnection.getConnectionInstance();
            pstmt = conn.prepareStatement(sql.toString());
            rs = pstmt.executeQuery();
            
            if(rs.next()) {
                total = rs.getInt(1);
            }
        } catch (SQLException e) {
            e.printStackTrace();
        } finally {
            if(pstmt != null) {
                try {
                    pstmt.close();
                    pstmt = null;
                } catch (SQLException e) {
                    e.printStackTrace();
                }
            }
            
            if(rs != null) {
                try {
                    rs.close();
                    rs = null;
                } catch (SQLException e) {
                    e.printStackTrace();
                }
            }
        }
        
        return total;
    }
    
}

String2JSON轉換java

public class EasyUIUtil {
    
    public static String stringToJSON(int total, ArrayList<Student> list) {
        StringBuffer sb = new StringBuffer();
        sb.append("{\"total\":").append(total).append(",");
        sb.append("\"rows\":[");
        
        for(int i=0; i<list.size(); i++) {
            Student stu = list.get(i);
            sb.append("{");
            sb.append("\"name\":").append("\"").append(stu.getName()).append("\",");
            sb.append("\"sex\":").append("\"").append(stu.getSex()).append("\",");;
            sb.append("\"age\":").append("\"").append(stu.getAge()).append("\",");;
            sb.append("\"birthday\":").append("\"").append(stu.getBirthday()).append("\"},");;
        }
        
        sb.delete(sb.length() - 1, sb.length());
        sb.append("]}");
        
        return sb.toString();
    }

}