bootstrap table服务端实现分页

来源：互联网发布：krpano100源码授权码编辑：程序博客网时间：2024/06/05 01:53

实现bootstrap table服务端实现分页demo

首页index.html

<!DOCTYPE html><html><head>    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">    <meta name="viewport" content="width=device-width, initial-scale=1.0">    <title>Demo</title>    <link rel="stylesheet" href="/assets/css/bootstrap.min.css" />    <link rel="stylesheet" href="/assets/css/bootstrap-table.min.css">    <script src="/assets/js/jquery-2.1.1.min.js"></script>    <script src="/assets/js/bootstrap.min.js"></script>    <script src="/assets/js/bootstrap-table.min.js"></script>    <script src="/assets/js/bootstrap-table-zh-CN.min.js"></script>    <script src="/assets/js/index.js"></script></head><body>    <!--查询窗体-->    <div class="widget-content">        <form method="post" class="form-horizontal" id="eventqueryform">            <input type="text" class="span2" name="seqNo" placeholder="编号">             <input type="text" class="span3" name="name" placeholder="姓名">             <input type="button" class="btn btn-default span1" id="eventquery" value="查询">        </form>    </div>    <div class="widget-content">        <!--工具条-->        <div id="toolbar">            <button class="btn btn-success btn-xs" data-toggle="modal" data-target="#add">添加事件</button>        </div>        <table id="eventTable"></table>    </div></body></html>

index.js

$(function() {    // 初始化表格    initTable();    // 搜索按钮触发事件    $("#eventquery").click(function() {        $('#eventTable').bootstrapTable(('refresh'));  // 很重要的一步，刷新url！        // console.log("/program/area/findbyItem?offset="+0+"&"+$("#areaform").serialize())        $('#eventqueryform input[name=\'name\']').val('')        $('#eventqueryform input[name=\'seqNo\']').val('')    });});// 表格初始化function initTable() {    $('#eventTable').bootstrapTable({        method : 'post',    // 向服务器请求方式        contentType : "application/x-www-form-urlencoded",  // 如果是post必须定义        url : '/bootstrap_table_demo/findbyitem',   // 请求url        cache : false, // 是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）        striped : true, // 隔行变色        dataType : "json",  // 数据类型        pagination : true,  // 是否启用分页        showPaginationSwitch : false, // 是否显示 数据条数选择框        pageSize : 10, // 每页的记录行数（*）        pageNumber : 1,     // table初始化时显示的页数        pageList: [5, 10, 15, 20], //可供选择的每页的行数（*）        search : false, // 不显示 搜索框        sidePagination : 'server', // 服务端分页        classes : 'table table-bordered', // Class样式//      showRefresh : true, // 显示刷新按钮        silent : true, // 必须设置刷新事件        toolbar : '#toolbar',       // 工具栏ID        toolbarAlign : 'right',     // 工具栏对齐方式        queryParams : queryParams,  // 请求参数，这个关系到后续用到的异步刷新        columns : [ {            field : 'seqNo',            title : '编号',            align : 'center'        }, {            field : 'name',            title : '姓名',            align : 'center'        }, {            field : 'sex',            title : '性别',            align : 'center'        }, {            field : 'id',            title : '操作',            align : 'center',            width : '280px',            formatter : function(value, row, index) {//               console.log(JSON.stringify(row));            }        } ],    });}// 分页查询参数，是以键值对的形式设置的function queryParams(params) {    return {        name : $('#eventqueryform input[name=\'name\']').val(),    // 请求时向服务端传递的参数        seqNo : $('#eventqueryform input[name=\'seqNo\']').val(),        limit : params.limit, // 每页显示数量        offset : params.offset, // SQL语句偏移量    }}

服务端 servlet

/** * Servlet实现类 */public class UserFindByItemSetvlet extends HttpServlet {    private static final long serialVersionUID = 1L;    private IUserService service = new UserServiceImpl();    public UserFindByItemSetvlet() {        super();    }    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        this.doPost(request, response);    }    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {        request.setCharacterEncoding("utf-8");        response.setContentType("text/json; charset=UTF-8");        // 得到表单数据        int offset = Integer.parseInt(request.getParameter("offset").trim());        int limit = Integer.parseInt(request.getParameter("limit").trim());        String seqNo = request.getParameter("seqNo").trim();        String name = request.getParameter("name").trim();        // 调用业务组件，得到结果        PageBean<UserBean> pageBean;        try {            pageBean = service.findByItem(offset, limit, seqNo, name);            ObjectMapper oMapper = new ObjectMapper();            //对象转换为json数据 ,且返回            oMapper.writeValue(response.getWriter(), pageBean);        } catch (Exception e) {                     e.printStackTrace();        }    }}

分页封装类

/** * 分页实体类 */public class PageBean<T> {    /** 行实体类 */    private List<T> rows = new ArrayList<T>();    /** 总条数 */    private int total;    public PageBean() {        super();    }    public List<T> getRows() {        return rows;    }    public void setRows(List<T> rows) {        this.rows = rows;    }    public int getTotal() {        return total;    }    public void setTotal(int total) {        this.total = total;    }}

获取用户实现类

public class UserServiceImpl implements IUserService{    /**     * sql查询语句     */    public PageBean<UserBean> findByItem(int offset, int limit, String seqNo, String name) {        PageBean<UserBean> cutBean = new PageBean<UserBean>();        // 基本SQL语句        String sql = "SELECT * FROM c_userinfo where 1=1 ";        // 动态条件的SQL语句        String itemSql = "";        if (seqNo != null && seqNo.length() != 0) {            itemSql += "and SeqNo like '%" + seqNo + "%' ";        }        if (name != null && name.length() != 0) {            itemSql += "and Name like '%" + name + "%' ";        }        // 获取sql连接        Connection con = DButil.connect();        PreparedStatement ps = null;        ResultSet rs = null;        try {            ps = con.prepareStatement(sql + itemSql + "limit ?,?");            ps.setInt(1, offset);            ps.setInt(2, limit);            rs = ps.executeQuery();            while (rs.next()) {                UserBean bean = new UserBean();                bean.setSeqNo(rs.getInt("seqNo"));                bean.setName(rs.getString("name"));                bean.setSex(rs.getInt("sex"));                bean.setBirth(rs.getString("birth"));                cutBean.getRows().add(bean);            }            // 得到总记录数，注意，也需要添加动态条件            ps = con.prepareStatement("SELECT count(*) as c FROM c_userinfo where 1=1 " + itemSql);            rs = ps.executeQuery();            if (rs.next()) {                cutBean.setTotal(rs.getInt("c"));            }        } catch (SQLException e) {            e.printStackTrace();        }  finally {            DButil.close(con);            if (ps != null) {                try {                    ps.close();                } catch (SQLException e) {                    e.printStackTrace();                }            }            if (rs != null) {                try {                    rs.close();                } catch (SQLException e) {                    e.printStackTrace();                }            }        }        return cutBean;    }}

数据库工具类

/** * 数据库工具类 *  * @author way *  */public class DButil {    /**     * 连接数据库     *      */    public static Connection connect() {        Properties pro = new Properties();        String driver = null;        String url = null;        String username = null;        String password = null;        try {            InputStream is = DButil.class.getClassLoader()                    .getResourceAsStream("DB.properties");            pro.load(is);            driver = pro.getProperty("driver");            url = pro.getProperty("url");            username = pro.getProperty("username");            password = pro.getProperty("password");            Class.forName(driver);            Connection conn = DriverManager.getConnection(url, username,                    password);            return conn;        } catch (FileNotFoundException e) {            e.printStackTrace();        } catch (IOException e) {            e.printStackTrace();        } catch (ClassNotFoundException e) {            e.printStackTrace();        } catch (SQLException e) {            e.printStackTrace();        }        return null;    }    /**     * 关闭数据库     *      * @param conn     *               */    public static void close(Connection con) {        if (con != null) {            try {                con.close();            } catch (SQLException e) {                e.printStackTrace();            }        }    }

DB.properties文件

driver=com.mysql.jdbc.Driverurl=jdbc:mysql://localhost:3306/gov_social?useUnicode\=true&characterEncoding\=utf-8username=rootpassword=root

阅读全文

0 0