自己動手寫的第一個前端分頁

項目需求：在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;
    }
}

 

 目前，這個前端分頁尚未出現問題，如有問題等待后期完善。不足之處：在這里完善