自己动手写的第一个前端分页

项目需求：在json配置文件里，配置一个表格，后台拼一个表格的HTML，带有分页。json配置文件里的表格配置：

[
 {
  "注释：":"表格",
  "module":"search",
  "options":[
      {
        "type":"calendar",
        "name":"calendar1",
        "properties":[{
          "start_value_name":"开始时间",
          "end_value_name":"结束时间",
          "default_start_time":"2017-01-01",
          "default_end_time":"2017-12-31"
        }]
      },
      {    
        "type":"select",
        "name":"select1",
        "properties":[{
          "name":"机构",
          "source":"code",
          "dict_identify":"yljg_type"
        }]    
      },
      {
        "type":"radio",
        "name":"radio1",
        "properties":[{
          "name":"就诊类型",
          "column":["全选","门诊","急诊","住院"]
        }]     
      }]
 },
 {
  "module":"content",
  "options":[
    {
      "type":"tab",
      "name":"tab1",
      "width":"100%",
      "height":"",
      "top":"1%",
      "bottom":"0",
      "left":"0",
      "right":"0",
      "title":"乳腺癌治疗质量",
      "properties":[{
         "column":["医疗机构","出院人次","治愈人次","好转人次","未愈人次","死亡人次","其他人次","治愈好转率","死亡率","31天再住院率"],
         "ajax_url":"adminPath/oa/commons/getTableInfo",
         "sql":"select c.yljgmc as 医疗机构,sum(a.cyrc) as 出院人次,sum(a.zyrc) as 治愈人次,sum(a.hzrc) as 好转人次,sum(a.wyrc) as 未愈人次,sum(a.swrc) as 死亡人次,sum(a.qtrc) as 其他人次, rtrim(to_char(round(sum(a.zyrc+a.hzrc)*100/sum(a.cyrc),2), 'fm9990.99'), '.')||'%' as 治愈好转率, rtrim(to_char(round(sum(a.swrc)*100/sum(a.cyrc),2), 'fm9990.99'), '.')||'%' as 死亡率 ,rtrim(to_char(round(sum(a.zzyrc)*100/sum(a.cyrc),2), 'fm9990.99'), '.')||'%' as 31天再住院率   from CB_ME_YLZL a,CB_DI_DATE b,CB_DI_YLJG c,CB_DI_JZLX d WHERE a.sjid=b.sjid and a.yljgid=c.yljgid and a.jzlxid=d.jzlxid and c.yljgdj='3' and a.bzid='2' and c.yljgmc = #{select1_val_select} AND (substr(b.sjmc,1,4)||'-'||substr(b.sjmc,5,2)||'-01')>= #{calendar1_enter_time} AND (substr(b.sjmc,1,4)||'-'||substr(b.sjmc,5,2)||'-01')<= #{calendar1_leave_time} AND d.jzlxmc = #{radio1_val_radio}  group by c.yljgmc order by c.yljgmc",
         "pager":true
         }] 
    }]
  }
]

表格受到三个选择器的控制。

我后台使用的是分页插件PageHelper：

<!-- 分页插件的依赖 -->
        <dependency>
            <groupId>com.github.pagehelper</groupId>
            <artifactId>pagehelper</artifactId>
            <version>5.0.0</version>
        </dependency>

获取数据：

@ResponseBody
    @RequestMapping(value = "/getTableInfo", method = {
            RequestMethod.POST }, produces = MediaType.APPLICATION_JSON_VALUE)
    public PageInfo<Map<Object, Object>> getTableInfo(@RequestParam(value = "str") String str,
            @RequestParam(value = "pageNum") int pageNum, @RequestParam(value = "pageSize") int pageSize) {
        PageInfo<Map<Object, Object>> page = null;
        try {
            page = TableUtils.getTableInfo(str, pageNum, pageSize, commonsService, "executeSQL");
        } catch (Exception e) {
            e.printStackTrace();
        }
        return page;
    }

TableUtils.getTableInfo如下：

 

/*使用模板：
    @ResponseBody
    @RequestMapping(value = "/getTableInfo", method = {
            RequestMethod.POST }, produces = MediaType.APPLICATION_JSON_VALUE)
    public PageInfo<Table> getTableInfo(@RequestParam(value = "str") String str,
            @RequestParam(value = "pageNum") int pageNum, @RequestParam(value = "pageSize") int pageSize) {
*/
    
    /**
     * 取表格数据
     * @param str        选择器条件
     * @param pageNum
     * @param pageSize
     * @param service    处理业务的service
     * @param methodName    处理业务service的具体方法名
     * @param sqlName    sqlName名
     * @return
     * @throws Exception
     */
    @SuppressWarnings("unchecked")
    public static PageInfo<Map<Object,Object>> getTableInfo(String str,int pageNum,int pageSize,BaseService object,String methodName) throws Exception {
        PageHelper.startPage(pageNum, pageSize);
        String tabSQL = sqlMap.get("tabSQL");
        tabSQL = CommonUtils.dealSQL(tabSQL, str);
        Method method = object.getClass().getMethod(methodName, String.class);
        List<Map<Object,Object>> list = (List<Map<Object,Object>>) method.invoke(object, tabSQL);
        PageInfo<Map<Object,Object>> page = new PageInfo<Map<Object,Object>>(list);
        
        return page;
    }
}

前台你需要的数据样式：

背景已经搭建完成，后台的分页插件已经帮你把所有你前台页面分页需要用到的属性都封装成上图的样式。现在可以写前端的分页样式了，我也只是一个还没毕业的菜鸟，所以写的烂希望大家不要嘲笑。

首先脑子里要有一个想法，想做成什么样子的。我想做成一个像下面这个样式的分页样式：

当点击》时出现

点击《时出现第一张分页图

 

点击尾页：

total=0时：

 

以菜鸟教程里bootstrap分页为基础，完成这样一个效果的分页pager.js代码如下：

/**
 * 分页
 * 
 * 每一个ul标签里展现ulLiNum个li(目前规定为3，程序中不算首页尾页和《 》的li)
 * 每一个li里面是pageSize(每页3条)条数据
 * liTotal是total/pageSize后获取的总li数，向下取整
 * 每一个ul里面又装pageSize个li
 * 
 * @param str           str代表传给后台的where条件
 * @param liNow            liNow代表当前是第几个li
 * @param pageNow        当前是第几页
 * @param total            总数据量
 * @param pageSize        每页的数据量
 * @param flag            flag代表是初始化还是按上下或尾页
 * @returns
 */
function getli(str,liNow,pageNow,total,pageSize,flag){
    var ulLiNum = 3;
    var liTotal = Math.ceil(total/pageSize);            /*所得总li数*/
    var code = '<ul class="pagination"  style="margin:0 auto;">';
    
    if(total == 0){
        code += '<li><a href="javascript:void(0)" style=\"color:#9D9D9D;\">首页</a></li>';
        code += '<li><a href="javascript:void(0)" style=\"color:#9D9D9D;\">&laquo;</a></li>';
        code += '<li><a href="javascript:void(0)" style=\"color:#9D9D9D;\">&raquo;</a></li>';
        code += '<li><a href="javascript:void(0)" style=\"color:#9D9D9D;\">尾页</a></li>';
    }else{
        code += '<li><a href="javascript:void(0)" onclick="getli(\''+str+'\','+1+','+1+','+total+','+pageSize+','+ 0 +')">首页</a></li>';
        if(flag == 0){                    //初始时没按上下时
            if(liTotal<=ulLiNum){                    //总li数小于3，只展现1-liTotal个li
                code += '<li><a href="javascript:void(0)">&laquo;</a></li>';
                code += compareCode(1,liTotal,1);
                code += '<li><a href="javascript:void(0)">&raquo;</a></li>';
            }else{                        //否则展现1-3个li
                code += '<li><a href="javascript:void(0)" onclick="getli(\''+str+'\','+liNow+','+pageNow+','+total+','+pageSize+','+ -1 +')">&laquo;</a></li>';
                code += compareCode(1,ulLiNum,1);
                code += '<li><a href="javascript:void(0)" onclick="getli(\''+str+'\','+liNow+','+pageNow+','+total+','+pageSize+','+ 1 +')">&raquo;</a></li>';
            }
        }else if(flag == 1){            //向下
            if(liNow < liTotal && liNow+ulLiNum <= liTotal){
                liNow = liNow + ulLiNum;            //每次点击向下，liNow前进ulLiNum个量
                code += '<li><a href="javascript:void(0)" onclick="getli(\''+str+'\','+liNow+','+pageNow+','+total+','+pageSize+','+ -1 +')">&laquo;</a></li>';
                if(liNow < liTotal && liNow+ulLiNum <= liTotal){        //说明没到最大liNow的值，最大liNow值请看flag=2时里面有注释（要根据liTotal分情况讨论）
                    code += compareCode(liNow,liNow+ulLiNum-1,liNow);
                }else{
                    code += compareCode(liNow,liTotal,liNow);
                }
                code += '<li><a href="javascript:void(0)" onclick="getli(\''+str+'\','+liNow+','+pageNow+','+total+','+pageSize+','+ 1 +')">&raquo;</a></li>';
            }else{
                return;
            }
        }else if(flag == -1){    //向上
            if(liNow > 1 && liNow-ulLiNum >= 1){
                liNow = liNow - ulLiNum;            //每次点击向上，liNow后退ulLiNum个量
                code += '<li><a href="javascript:void(0)" onclick="getli(\''+str+'\','+liNow+','+pageNow+','+total+','+pageSize+','+ -1 +')">&laquo;</a></li>';
                if(liNow > 1 && liNow-ulLiNum >= 1){                    //说明每到最小liNow值，最小liNow值为1
                    code += compareCode(liNow,liNow+ulLiNum-1,liNow);
                }else{
                    code += compareCode(liNow,ulLiNum,liNow);
                }
                code += '<li><a href="javascript:void(0)" onclick="getli(\''+str+'\','+liNow+','+pageNow+','+total+','+pageSize+','+ 1 +')">&raquo;</a></li>';
            }else{
                return;
            }
        }else if(flag = 2){        //点击尾页
            var pageN = $(".pagination li.active").text();
            pageN = parseInt(pageN);
            if(pageN != liTotal){//如果当前页已经是最后一页，return，否则使liNow前进至整数个ulLiNum个量，到达最接近liTotal的一个值
                if(liTotal % ulLiNum != 0){
                    liNow = Math.floor(liTotal/ulLiNum)*ulLiNum+1;            //将liNow设置为最大liNow的值
                    code += '<li><a href="javascript:void(0)" onclick="getli(\''+str+'\','+liNow+','+pageNow+','+total+','+pageSize+','+ -1 +')">&laquo;</a></li>';
                    code += compareCode(liTotal-liTotal%ulLiNum+1,liTotal,liTotal);
                }else{
                    liNow = liTotal-ulLiNum+1;                                //将liNow设置为最大liNow的值
                    code += '<li><a href="javascript:void(0)" onclick="getli(\''+str+'\','+liNow+','+pageNow+','+total+','+pageSize+','+ -1 +')">&laquo;</a></li>';
                    code += compareCode(liTotal-ulLiNum+1,liTotal,liTotal);
                }
                code += '<li><a href="javascript:void(0)" onclick="getli(\''+str+'\','+liNow+','+pageNow+','+total+','+pageSize+','+ 1 +')">&raquo;</a></li>';
            }else{
                return;
            }
            
        }
        code += '<li><a href="javascript:void(0)" onclick="getli(\''+str+'\','+ liNow +','+total+','+total+','+pageSize+','+ 2 +')">尾页</a></li>';
    }
    
    code += '</ul>';
    var my = document.getElementById('myli');
    my.innerHTML = code;
    liBackgroundColor(str,total,pageSize);
}

/**
 * 当li被点击时，去除其它li的高亮颜色，将自己设置为高亮蓝，并获取自己的页码值传递给deal方法（真正调用ajax请求的方法）
 * @param str     where条件传递的字符串
 * @param total
 * @param pageSize
 * @returns
 */
function liBackgroundColor(str,total,pageSize){
    var text;
    $(".pagination li").click(function(){  
        text = $(this).text();
        if(total == 0){         //总数为0，所有li都曾现暗色，在点击任何li都没用
            $(this).siblings().removeClass("active");
        }else{
            if(text != "«" && text != "»" && text != "尾页" && text != "首页"){
                $(this).addClass("active").siblings().removeClass("active");
            }
        }
        var pageNow = $(".pagination li.active").text();
        pageNow = parseInt(pageNow);
        deal(str,pageNow,total,pageSize);　　//这个函数写在Tableutils里
    });
}

/**
 * 
 * 当初始化或点击上、下、尾页时将active位置的li设置为active(背景显蓝)
 * 
 * @param begin  开始位置
 * @param end     截至位置
 * @param active    高亮位置，颜色为蓝
 * @returns
 */
function compareCode(begin,end,active){
    var code = '';
    for (var i = begin;i <= end ;i++) {
        if(i != active){
            code += '<li><a href="javascript:void(0)">'+i+'</a></li>';
        }else{
            code += '<li class="active"><a href="javascript:void(0)">'+i+'</a></li>';
        }
    }
    return code;
}

 

 

 拼凑表格HTML的工具类全部代码：

package com.echarts.config.page.utils;


import java.lang.reflect.Method;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

import org.apache.commons.lang.StringUtils;

import com.alibaba.fastjson.JSONArray;
import com.alibaba.fastjson.JSONObject;
import com.echarts.config.page.entity.Div;
import com.github.pagehelper.PageHelper;
import com.github.pagehelper.PageInfo;
import com.thinkgem.jeesite.common.service.BaseService;

/**
 * 表格
 *
 */
public class TableUtils {
    public static Map<String, String> sqlMap = new HashMap<String, String>();
    public static String[] sqlcolumn = null;
    
    /**
     * 拼表格HTML
     * @param jsonArray
     * @param url
     * @param sqlName
     * @return
     */
    public static Div tableHtml(String top,String bottom,String left,String right,String name,String width,String height,String title,JSONArray jsonArray) {
        Div tab = new Div();
        StringBuilder div = new StringBuilder();
        StringBuilder script = new StringBuilder();
        String column = "";
        boolean pager = false;
        String ajax_url = "";
        String sql = "";
        for (Object object : jsonArray) {
            column = ((JSONObject) object).getString("column");
            ajax_url = ((JSONObject) object).getString("ajax_url");
            sql = ((JSONObject) object).getString("sql");
            pager = ((JSONObject) object).getBoolean("pager");
            break;
        }
        if (StringUtils.isBlank(name) || StringUtils.isBlank(sql)) {
            System.out.println("tab 未配置id属性或sql语句！");
            return null;
        } else {
            sqlMap.put("tabSQL", sql);
            sqlcolumn = CommonUtils.getColumn(sql);
            div.append("<div class=\"bod\" style=\"width:");
            div.append(width);
            div.append(";height:");
            div.append(height);
            div.append(";float:left; margin:");
            div.append(top);
            div.append(" ");
            div.append(right);
            div.append(" ");
            div.append(bottom);
            div.append(" ");
            div.append(left);
            div.append(";\">");
            div.append("<div id=\"");
            div.append(name);
            div.append("\" style=\"padding:0px 20px;\"></div>");
            div.append("<div id = \"myli\" style=\"width:271px;margin:0 auto;\"></div></div>");
        }
        
        String[] cols = column.replace("[", "").replace("]", "").replaceAll("\"", "").split(",");
        script.append("var pn;var t;var ps;var flag = 0;");
        
        script.append("function deal(str,pageNow,pageSize){");
        script.append("init$Tab");
        script.append(name);
        script.append("(str,pageNow,pageSize,1);");
        script.append("}");
        
        script.append("var init$Tab");
        script.append(name);
        script.append(" = function(str,pageNum,pageSize,flag) {");
        script.append("var s = str+\"\'\";");
        script.append("$.ajax({");
        script.append("type: \"post\",");
        script.append("url: \"");        //  "url: \"adminPath/oa/medical5/getTableInfo\",";
        script.append(ajax_url);
        script.append("\",");
        script.append("data: {\"str\": str,\"pageNum\":pageNum,\"pageSize\":pageSize},");
        script.append("dataType: \"json\",");
        script.append("success: function (result) {");
        script.append("console.log('table:');");
        script.append("console.log(result);");
        script.append("pn = result.pageNum;");
        script.append("t = result.total;");
        script.append("ps = result.pageSize;");
        script.append("var code = '';");
        //表
        //script += "var code = '<div style=\"margin:0 auto;text-align:center;\">';";
        if(StringUtils.isNotBlank(title)) {
            script.append("code +='<span  class=\"h3_style\"><h3>");
            script.append(title);
            script.append("</h3></span>';");
        }
        script.append("code += '<table class=\"table table-striped\" border=\"1px\" style=\"margin-bottom: 5px;\">';");
        script.append("code += '<thead><tr>';");
        script.append("code += '<th>编号</th>';");
        for (String strc : cols) {
            script.append("code += '<th>");
            script.append(strc);
            script.append("</th>';");
        }
        script.append("code += '</tr></thead><tbody>';");
        script.append("try{");
        script.append("var list = result.list;");
        script.append("for(var i=0;i<list.length;i++){");
        script.append("code += '<tr><td>'+(i+1+(result.pageNum-1)*result.pageSize)+'</td>';");
        for (int i = 0; i < cols.length; i++) {
            for (int j = 0; j < sqlcolumn.length; j++) {
                if(sqlcolumn[j]!=null&&cols[i]!=null) {
                    if(("C_"+cols[i].toUpperCase()).equals(sqlcolumn[j].toUpperCase())) {
                        script.append("code += '<td>'+list[i].C_");
                        script.append(cols[i].toUpperCase());
                        script.append("+'</td>';");
                        break;
                    }
                }else {
                    break;
                }
            }
        }
        script.append("code += '</tr>';}}catch(err){}");
        script.append("code += '</tbody></table>';");
        script.append("var table = document.getElementById(\\'");
        script.append(name);
        script.append("\\');");
        script.append("table.innerHTML = code;");
        
        //分页
        if(pager != false) {
            script.append("if(flag == 0){");
            script.append("getli(str,t,ps);");
            script.append("}");
        }
        
        script.append("}})};");

        tab.setText(div.toString());
        tab.setValue(script.toString());

        return tab;
    }

/*使用模板：
    @ResponseBody
    @RequestMapping(value = "/getTableInfo", method = {
            RequestMethod.POST }, produces = MediaType.APPLICATION_JSON_VALUE)
    public PageInfo<Table> getTableInfo(@RequestParam(value = "str") String str,
            @RequestParam(value = "pageNum") int pageNum, @RequestParam(value = "pageSize") int pageSize) {
*/
    
    /**
     * 取表格数据
     * @param str        选择器条件
     * @param pageNum
     * @param pageSize
     * @param service    处理业务的service
     * @param methodName    处理业务service的具体方法名
     * @param sqlName    sqlName名
     * @return
     * @throws Exception
     */
    @SuppressWarnings("unchecked")
    public static PageInfo<Map<Object,Object>> getTableInfo(String str,int pageNum,int pageSize,BaseService object,String methodName) throws Exception {
        PageHelper.startPage(pageNum, pageSize);
        String tabSQL = sqlMap.get("tabSQL");
        tabSQL = CommonUtils.dealSQL(tabSQL, str);
        Method method = object.getClass().getMethod(methodName, String.class);
        List<Map<Object,Object>> list = (List<Map<Object,Object>>) method.invoke(object, tabSQL);
        PageInfo<Map<Object,Object>> page = new PageInfo<Map<Object,Object>>(list);
        return page;
    }
}

 

 目前，这个前端分页尚未出现问题，如有问题等待后期完善。不足之处：在这里完善