zoukankan      html  css  js  c++  java
  • datatable 分页实例

    1.使用datatable前台分页,需要后台返回全部数据,返回lisit

    2.如果是后台分页 则后台需要获取分页参数,页面中要加

      "searchable":true,  "bServerSide": true

       这两个属性,不需要   dataSrc : ""   这个属性

      返回DataTablePageDto 分页对象,查询的list结果set到分页对象中

    页面代码如下

    currentDt = $table.DataTable({
                    retrieve: true,
                     aoColumnDefs:[{"bSortable": false, "aTargets": [0]},{"bSortable": false, "aTargets": [1]}],//指定某列不排序
                    ajax : {
                        url : baseUrl + "list",
                        data:{orgid:v},
                        dataSrc : ""              //前台分页要加该属性
                    },
                    fnHeaderCallback:function(){
                        $("#sp").html("<input type='checkbox' id='selectAll'  onchange='checkInp()'>");
                    },
                    fnDrawCallback: function()
                    {
                          this.api().column(1).nodes().each(function(cell, i) {
                          cell.innerHTML =  i + 1;
                          });
                    },
                    columns : [
                        { 
                            title:"<span id='sp'><input type='checkbox' id='selectAll'  onchange='checkInp()'></span>",
                            data: "alink"
                        },
                        {
                            title:"<span class='num_tab'>序号</span>",
                            data :null,
                            targets: 0
                        },
                        {
                            title:"<span class='name'>姓名</span>",
                            data:"name"
                        },
                        {
                            title:"<span class='sex_list'>性别</span>",
                            data:"sex",
                  "render":function(data,type,row,meta){
                     if(data=='1'){
                       data='男';
                     }else if(data=='2'){
                       data='女';
                     }else{
                       data='';
                     }
                       return data;
                   } 
    },
                        {
                            title:"现任职务",
                            data:"xrPresent"
                        },
                        {
                            title:"<span class='jiguan'>籍贯</span>",
                            data:"origin"
                        },
                        {
                            title:"入党时间",
                            data:"rdTime"                        
                        }
                        , {
                            title : "<span class='btn_td'>操作</span>",
                            data : "id",
                            createdCell:function(td,tdData){
                                var operator = [];
                                /** 查看不能用 框架样式 请调整。。。。。。***/
                                <s:hasPermission name="/admin/gov/sigin_list">
                                //选调生签到信息列表
                                var qdBtn = G.viewSigin(tdData,tz);
                                operator.push(qdBtn);
                                </s:hasPermission>
                                
                                /** 查看不能用 框架样式 请调整。。。。。。***/
                                <s:hasPermission name="/admin/gov/cadre_info">
                                var tz="1";//选调生信息列表
                                var xqBtn = G.viewBtn(tdData,tz);
                                operator.push(xqBtn);
                                </s:hasPermission>
                                
                                <s:hasPermission name="/admin/gov/check_pre">
                                var checkBtn = G.createCheckBtn(tdData);
                                operator.push(checkBtn);
                                </s:hasPermission>
                                
                                <s:hasPermission name="/admin/gov/cadre_update">
                                var suoBtn = G.createSuo1Btn(tdData);
                                operator.push(suoBtn);
                                </s:hasPermission>
                                
                                <s:hasPermission name="/admin/gov/cadre_delete">
                                var delBtn = G.createSuo2Btn(tdData);
                                operator.push(delBtn);
                                </s:hasPermission>
                                
                                
                                <s:hasPermission name="/admin/gov/cadre_view">
                                var view = G.createViewBtn(tdData);
                                operator.push(view);
                                </s:hasPermission>
                                
                                $(td).html(operator);
                            }
                        
                        } ],
                });

    // 执行查询后的列表全选方法
    function checkInp(){
    var flag = false;
    if($("#selectAll").is(':checked')){
    flag = true;
    }else{
    flag = false;
    }
    $("input[name='gov-list']").each(function() {
    $(this).attr("checked", flag);
    });

     

    java后台方法如下

       
    //DataTablePageDto 分页对象,searchValue 搜索参数

    @RequestMapping("/list") @ResponseBody public DataTablePageDto<TorgCadre> addCadre(Integer orgid, String ids,DataTablePageDto tablePage, HttpServletRequest request) throws UnsupportedEncodingException { String searchValue = request.getParameter("search[value]");          //搜索参数 searchValue = new String(searchValue.getBytes("iso8859-1"),"UTF-8");     //解决中文乱码 DataTablePageDto<TorgCadre> dataTablePageDto=new DataTablePageDto<TorgCadre>();//分页对象 dataTablePageDto.setStart(tablePage.getStart());                  //设置起始查询页 dataTablePageDto.setLength(tablePage.getLength());                 //设置查询条数 dataTablePageDto.setDraw(tablePage.getDraw());                    //绘制次数 StringBuffer hql = new StringBuffer("FROM TorgCadre WHERE status=? and name like ?"); List<TorgCadre> list = new ArrayList(); if (orgid != null && orgid > 0) { hql.append(" and orgid in ( "); hql.append(getAllOrgidsTwo(orgid)); // hql.append(getAllOrgids(orgid)); hql.append(" ) "); hql.append(levelOrder()); } else if (ids != null && !ids.trim().equals("")) { hql.append(" and id in ( "); hql.append(ids); hql.append(" ) "); hql.append(levelOrder()); }else if("admin".equals(getLoginUserinfo().getUsername())){ hql.append(levelOrder()); }else{ hql.append(" and 1=-1"); dataTablePageDto.setRecordsTotal(0L); dataTablePageDto.setRecordsFiltered(0L); } String hqlCount=hql.toString().replace("FROM", "select count(1) from"); Long total = cadreService.selectQueryCount(hqlCount.toString(),"1",searchValue);//总记录数 dataTablePageDto.setRecordsTotal(total); dataTablePageDto.setRecordsFiltered(total); list = cadreService.selectForList(hql.toString(),dataTablePageDto, "1",searchValue); for (TorgCadre t : list) { t.setTorgCadreFamilies(null); t.setTorgCadreResumes(null); t.setCheck(null); t.setAlink("<input type='checkbox' name='gov-list' value=" + t.getId() + ">"); } User obj = (User) getSession().getAttribute(SK.USER_INFO); log.info("查看列表成功"); dataTablePageDto.setData(list); return dataTablePageDto;//返回分页对象 }

    分页对象实体类如下

    //该后台分页是采用hibernate分页查询
    public
    class DataTablePageDto<T> { private List<T> data; //包含的数据 private Integer draw=1; //绘制次数 private Long recordsTotal;//总长度 private Long recordsFiltered;//过滤后的长度 private Integer start=0; //第几条数据开始查询 private Integer length=10; //每页显示几条 public DataTablePageDto() { } geter seter方法省略...... }

    附其他分页实体

    package com.diamond.core.feature.orm.hibernate;
    
    import java.util.ArrayList;
    import java.util.List;
    
    /**
     * Mybatis分页参数及查询结果封装. 注意所有序号从1开始.
     * 
     * @param <T>
     *            Page中记录的类型.
     * @author StarZou
     * @since 2014年5月18日 下午1:34:32
     **/
    public class Page<T> {
        // --分页参数 --//
        /**
         * 页编号 : 第几页
         */
        protected int pageNo = 1;
        /**
         * 页大小 : 每页的数量
         */
        protected int pageSize = 15;
    
        /**
         * 偏移量 : 第一条数据在表中的位置
         */
        protected int offset;
    
        /**
         * 限定数 : 每页的数量
         */
        protected int limit;
    
        // --结果 --//
        /**
         * 查询结果
         */
        protected List<T> result = new ArrayList<T>();
    
        /**
         * 总条数
         */
        protected int totalCount;
    
        /**
         * 总页数
         */
        protected int totalPages;
    
        // --计算 数据库 查询的参数 : LIMIT 3, 3; LIMIT offset, limit; --//
        /**
         * 计算偏移量
         */
        private void calcOffset() {
            this.offset = ((pageNo - 1) * pageSize);
        }
    
        /**
         * 计算限定数
         */
        private void calcLimit() {
            this.limit = pageSize;
        }
    
        // -- 构造函数 --//
        public Page() {
            this.calcOffset();
            this.calcLimit();
        }
    
        public Page(int pageNo, int pageSize) {
            this.pageNo = pageNo;
            this.pageSize = pageSize;
            this.calcOffset();
            this.calcLimit();
        }
    
        public Page(int start,int pageSize,String keyword){
            this.offset=start;
            this.pageSize = pageSize;
        }
        
        // -- 访问查询参数函数 --//
        /**
         * 获得当前页的页号,序号从1开始,默认为1.
         */
        public int getPageNo() {
            return pageNo;
        }
    
        /**
         * 获得每页的记录数量,默认为1.
         */
        public int getPageSize() {
            return pageSize;
        }
    
        /**
         * 根据pageNo和pageSize计算当前页第一条记录在总结果集中的位置,序号从1开始.
         */
        public int getFirst() {
            return ((pageNo - 1) * pageSize) + 1;
        }
    
        /**
         * 根据pageNo和pageSize计算当前页第一条记录在总结果集中的位置,序号从0开始.
         */
        public int getOffset() {
            return offset;
        }
    
        public int getLimit() {
            return limit;
        }
    
        // -- 访问查询结果函数 --//
        /**
         * 取得页内的记录列表.
         */
        public List<T> getResult() {
            return result;
        }
    
        /**
         * 设置页内的记录列表.
         */
        public void setResult(final List<T> result) {
            this.result = result;
        }
    
        /**
         * 取得总记录数, 默认值为-1.
         */
        public int getTotalCount() {
            return totalCount;
        }
    
        /**
         * 设置总记录数.
         */
        public void setTotalCount(final int totalCount) {
            this.totalCount = totalCount;
            this.totalPages = this.getTotalPages();
        }
    
        /**
         * 根据pageSize与totalCount计算总页数, 默认值为-1.
         */
        public int getTotalPages() {
            if (totalCount < 0) {
                return -1;
            }
            int pages = totalCount / pageSize;
            return totalCount % pageSize > 0 ? ++pages : pages;
        }
    
        public void setTotalPages(int totalPages) {
            this.totalPages = totalPages;
        }
    
    }
  • 相关阅读:
    【NOIP 模拟赛】钟 模拟+链表
    【NOIP 模拟赛】Evensgn 剪树枝 树形dp
    【NOIP模拟赛】公主的朋友 区间染色问题
    【BZOJ 3669】 [Noi2014]魔法森林 LCT维护动态最小生成树
    【BZOJ3674】可持久化并查集加强版
    【NOIP模拟赛】 permutation 数学(打表)
    【NOIP模拟赛】beautiful 乱搞(平衡树)+ST
    【NOIP模拟赛】与非 乱搞
    【NOIP模拟赛】Evensgn 的债务 乱搞
    [NOIP2009]靶形数独 深搜+枝杈优化
  • 原文地址:https://www.cnblogs.com/learnapi/p/8027662.html
Copyright © 2011-2022 走看看