返回顶部
首页 > 资讯 > 前端开发 > JavaScript >bootstrap Table的使用方法总结
  • 750
分享到

bootstrap Table的使用方法总结

2024-04-02 19:04:59 750人浏览 独家记忆
摘要

本文为大家分享了bootstrap Table的使用方法,供大家参考,具体内容如下 官网资料 效果图: 案例: html <!-- 表格 --> <table

本文为大家分享了bootstrap Table的使用方法,供大家参考,具体内容如下

官网资料

效果图:

案例:

html


<!-- 表格 -->
<table id="ffServerSystemCheckListTable"
       data-toolbar="#toolbar"
       data-show-columns="true"
       data-show-columns-toggle-all="true">
 
<%--     <thead>--%>
<%--     <tr>--%>
<%--          <th data-field="cityName">ID</th>--%>
<%--          <th data-field="cityName">Item Name</th>--%>
<%--          <th data-field="cityName">Item Price</th>--%>
<%--     </tr>--%>
<%--     </thead>--%>

</table>

javascript


$(document).ready(function () {
 
    //表格插件
    mytable=$('#ffServerSystemCheckListTable').bootstrapTable({
 
        //请求方法
        method: 'post',
        //类型JSON
        dataType: "json",
        contentType: "application/x-www-fORM-urlencoded",
        //显示检索按钮
        //showSearch: false,
        //显示刷新按钮
        showRefresh: false,
        //显示切换手机试图按钮
        showToggle: false,
        //显示 内容列下拉框
        showColumns: false,
        //显示到处按钮
        showExport: false,
        //显示切换分页按钮
        showPaginationSwitch: false,
        //最低显示2行
        minimumCountColumns: 2,
        //是否显示行间隔色
        //striped: true,
        //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
        cache: false,
        //是否显示分页(*)
        pagination: true,
        //排序方式
        sortOrder: "asc",
        //初始化加载第一页,默认第一页
        pageNumber: 1,
        //每页的记录行数(*)
        pageSize: 10,
        //可供选择的每页的行数(*)
        pageList: [10, 25, 50, 100],
        //这个接口需要处理bootstrap table传递的固定参数,并返回特定格式的json数据
        url: "${ctx}/ff/server/ffServerSystemCheck/data",
        //默认值为 'limit',传给服务端的参数为:limit, offset, search, sort, order Else
        //queryParamsType:'',
        查询参数,每次调用是会带上这个参数,可自定义
        queryParams: function (params) {
            var searchParam = $("#searchForm").serializeJSON();
            searchParam.pageNo = params.limit === undefined ? "1" : params.offset / params.limit + 1;
            searchParam.pageSize = params.limit === undefined ? -1 : params.limit;
            searchParam.orderBy = params.sort === undefined ? "" : params.sort + " " + params.order;
            return searchParam;
        },
        //分页方式:client客户端分页,server服务端分页(*)
        sidePagination: "server",
        // contextMenuTrigger:"right",//pc端 按右键弹出菜单
        // contextMenuTriggerMobile: "press",//手机端 弹出菜单,click:单击, press:长按。
        // contextMenu: '#context-menu',
        onClickRow: function (row, $el) {
            rowId = row.id;
        },
        onShowSearch: function () {
            $("#search-collapse").slideToggle();
        },
        responseHandler: function (res) {//用于接收其他参数
            return res;
        },
        onPreBody: function (res) {},
        onLoadSuccess: function() {},
        onPostHeader: function () {},
        onAll: function () {},
        columns: [
            [
                {
                    field: 'cityName',
                    title: '城市公司',
                    rowspan: 2,
                    formatter: function (value, row, index) {
                        return value;
 
                    }
                }
                , {
                field: 'projectName',
                title: '项目名称',
                rowspan: 2
            }, {
                title: '首页轮播',
                colspan: 2,
                align: 'center'
            }, {
                title: '消息',
                colspan: 2,
                align: 'center'
            }, {
                title: '海报模板',
                colspan: 2,
                align: 'center'
            }, {
                title: '楼盘动态',
                colspan: 2,
                align: 'center'
            }, {
                title: '项目卖点',
                colspan: 2,
                align: 'center'
            }, {
                title: '项目海报',
                colspan: 2,
                align: 'center'
            }, {
                title: '项目视频',
                colspan: 2,
                align: 'center'
            }],
            [{
                field: 'newsCount',
                title: '更新次数',
            }
                , {
                field: 'newsState',
                title:"-",
                class:'newsTitle',
                formatter: function (value, row, index) {
                    if (value=='不合格') {
                        return "<span style=\"color: red;\">不合格<span>";
                    }
                    return value;
                    // return jp.getDictLabel(${fns:toJson(fns:getDictList('cooperation_flag'))}, value, "-");
                }
 
            }
                , {
                field: 'msGCount',
                title: '更新次数'
            }
                , {
                field: 'msgState',
                title: '-',
                class:'msgTitle',
                formatter: function (value, row, index) {
                    if (value=='不合格') {
                        return "<span style=\"color: red;\">不合格<span>";
                    }
                    return value;
                }
 
            }
                , {
                field: 'tempCount',
                title: '更新次数'
            }, {
                field: 'tempState',
                title: '-',
                class:'tempTitle',
                formatter: function (value, row, index) {
                    if (value=='不合格') {
                        return "<span style=\"color: red;\">不合格<span>";
                    }
                    return value;
                }
 
            },
                {
                    field: 'houseCount',
                    title: '更新次数'
                }, {
                field: 'houseState',
                title: '-',
                class:'houseTitle',
                formatter: function (value, row, index) {
                    if (value=='不合格') {
                        return "<span style=\"color: red;\">不合格<span>";
                    }
                    return value;
                }
 
            },
                {
                    field: 'sellCount',
                    title: '更新次数'
 
                }, {
                field: 'sellState',
                title: '-',
                class:'sellTitle',
                formatter: function (value, row, index) {
                    if (value=='不合格') {
                        return "<span style=\"color: red;\">不合格<span>";
                    }
                    return value;
                }
 
            },
                {
                    field: 'postCount',
                    title: '更新次数'
 
                }, {
                field: 'postState',
                title: '-',
                class:'postTitle',
                formatter: function (value, row, index) {
                    if (value=='不合格') {
                        return "<span style=\"color: red;\">不合格<span>";
                    }
                    return value;
                }
 
            }, {
                field: 'videoCount',
                title: '更新次数'
 
            }
                , {
                field: 'videoState',
                title: '-',
                class:'videoTitle',
                formatter: function (value, row, index) {
                    if (value=='不合格') {
                        return "<span style=\"color: red;\">不合格<span>";
                    }
                    return value;
                }
            }
 
            ]
 
        ]
    });

 
    if (navigator.userAgent.match(/(iPhone|iPod|Android|iOS)/i)) {//如果是移动端
        $('#ffServerSystemCheckListTable').bootstrapTable("toggleView");
    }
    $('#ffServerSystemCheckListTable').on('check.bs.table uncheck.bs.table load-success.bs.table ' +
        'check-all.bs.table uncheck-all.bs.table', function () {
        $('#remove').prop('disabled', !$('#ffServerSystemCheckListTable').bootstrapTable('getSelections').length);
        $('#batchSet').prop('disabled', !$('#ffServerSystemCheckListTable').bootstrapTable('getSelections').length);
        $('#view,#edit').prop('disabled', $('#ffServerSystemCheckListTable').bootstrapTable('getSelections').length != 1);
    });
 
 
    // 绑定查询按扭
    $("#search").click("click", function () {
        //重新加载表格参数
        // $('#ffServerSystemCheckListTable').bootstrapTable("refreshOptions", {
        //     //url : path + "/api/peopledatainfo/getPeopleInfoList", // 获取数据的地址
        //     columns : [],
        //
        // });
        //动态表头设置
        $.ajax({
            url: "${ctx}/ff/server/ffServerSystemCheck/checkInfo",
            // type : "POST",
            data: $("#searchForm").serialize(),
            success: function (data) {
                $(".newsTitle .th-inner").html(data.newsTitle);
                $(".msgTitle .th-inner").html(data.msgTitle);
                $(".tempTitle .th-inner").html(data.tempTitle);
                $(".houseTitle .th-inner").html(data.houseTitle);
                $(".sellTitle .th-inner").html(data.sellTitle);
                $(".postTitle .th-inner").html(data.postTitle);
                $(".videoTitle .th-inner").html(data.videoTitle);
                $('#ffServerSystemCheckListTable').bootstrapTable('refresh');
            }
        });
 
 
    });
 
 
 
});

Java

controller:


@ResponseBody
@RequestMapping(value = "data")
public Map<String, Object> data(httpservletRequest request, HttpServletResponse response) {
        Page<FfServerSystemCheck> page = server.findWEBPage(new Page<FfServerSystemCheck>(request, response));
        Map<String, Object> map = new HashMap<String, Object>();
  map.put("rows", page.getList());
  map.put("total", page.getCount());
        return data;
    }

xml:


<select id="findWebList" resultType="com.jeeplus.modules.ff.server.entity.FfServerSystemCheck">
        <if test="dateTypeAll == '0'.toString() or dateTypeAll == '1'.toString() or dateTypeAll=='yesterday' or dateTypeAll=='today'">
            select
            cityName,
            projectName,
            newsCount,
            '-' newsState,
            msgCount,
            '-' msgState,
            tempCount,
            '-' tempState,
            houseCount,
            '-' houseState,
            sellCount,
            '-' sellState,
            postCount,
            '-' postState,
            videoCount,
            '-' videoState
        </if>
 
        <if test="dateTypeAll == 'weeks' or dateTypeAll == 'month' or dateTypeAll=='halfYear' or dateTypeAll=='years'">
            select
            cityName,
            projectName,
            newsCount,
            CASE  WHEN newsCount > #{newsNum} THEN '合格'  ELSE '不合格' END newsState,
            msgCount,
            CASE  WHEN msgCount >  #{msgNum} THEN '合格' ELSE '不合格' END msgState,
            tempCount,
            CASE  WHEN tempCount >  #{tempNum} THEN '合格' ELSE '不合格' END tempState,
            houseCount,
            CASE  WHEN houseCount > #{houseNum} THEN '合格' ELSE '不合格' END houseState,
            sellCount,
            CASE  WHEN sellCount > #{sellNum} THEN '合格' ELSE '不合格' END sellState,
            postCount,
            CASE  WHEN postCount > #{postNum} THEN '合格' ELSE '不合格' END postState,
            videoCount,
            CASE  WHEN videoCount > #{videoNum} THEN '合格' ELSE '不合格' END videoState
        </if>
 
 
        from (
        SELECT
        so.NAME cityName,
        pm.project_name projectName,
        ( SELECT count(*) FROM ff_server_news_manage WHERE project_id = pm.id
        <if test="startDate != null and startDate != ''">
    AND DATE_FORMAT(pm.create_date,'%Y-%m-%d') <![CDATA[>=]]>  #{startDate}
   </if>
        <if test="endDate != null and endDate != ''">
    AND DATE_FORMAT(pm.create_date,'%Y-%m-%d') <![CDATA[<=]]>  #{endDate}
   </if>
        ) newsCount,
        ( SELECT count(*) FROM ff_server_message_manage WHERE project_id = pm.id
        <if test="startDate != null and startDate != ''">
    AND DATE_FORMAT(pm.create_date,'%Y-%m-%d') <![CDATA[>=]]>  #{startDate}
   </if>
        <if test="endDate != null and endDate != ''">
    AND DATE_FORMAT(pm.create_date,'%Y-%m-%d') <![CDATA[<=]]>  #{endDate}
   </if>
        ) msgCount,
        ( SELECT count(*) FROM ff_tuoke_poster_template WHERE project_id = pm.id
        <if test="startDate != null and startDate != ''">
    AND DATE_FORMAT(pm.create_date,'%Y-%m-%d') <![CDATA[>=]]>  #{startDate}
   </if>
        <if test="endDate != null and endDate != ''">
    AND DATE_FORMAT(pm.create_date,'%Y-%m-%d') <![CDATA[<=]]>  #{endDate}
   </if>
        ) tempCount,
        ( SELECT count(*) FROM ff_server_houses_dynamic WHERE project_id = pm.id
        <if test="startDate != null and startDate != ''">
    AND DATE_FORMAT(pm.create_date,'%Y-%m-%d') <![CDATA[>=]]>  #{startDate}
   </if>
        <if test="endDate != null and endDate != ''">
    AND DATE_FORMAT(pm.create_date,'%Y-%m-%d') <![CDATA[<=]]>  #{endDate}
   </if>
        ) houseCount,
        ( SELECT count( CASE WHEN type = 0 THEN 1 END ) FROM ff_server_talk_tool WHERE project_id = pm.id
        <if test="startDate != null and startDate != ''">
    AND DATE_FORMAT(pm.create_date,'%Y-%m-%d') <![CDATA[>=]]>  #{startDate}
   </if>
        <if test="endDate != null and endDate != ''">
    AND DATE_FORMAT(pm.create_date,'%Y-%m-%d') <![CDATA[<=]]>  #{endDate}
   </if>
        ) sellCount,
        ( SELECT count( CASE WHEN type = 1 THEN 1 END ) FROM ff_server_talk_tool WHERE project_id = pm.id
        <if test="startDate != null and startDate != ''">
    AND DATE_FORMAT(pm.create_date,'%Y-%m-%d') <![CDATA[>=]]>  #{startDate}
   </if>
        <if test="endDate != null and endDate != ''">
    AND DATE_FORMAT(pm.create_date,'%Y-%m-%d') <![CDATA[<=]]>  #{endDate}
   </if>
        ) postCount,
        ( SELECT count( CASE WHEN type = 2 THEN 1 END ) FROM ff_server_talk_tool WHERE project_id = pm.id
        <if test="startDate != null and startDate != ''">
    AND DATE_FORMAT(pm.create_date,'%Y-%m-%d') <![CDATA[>=]]>  #{startDate}
   </if>
        <if test="endDate != null and endDate != ''">
    AND DATE_FORMAT(pm.create_date,'%Y-%m-%d') <![CDATA[<=]]>  #{endDate}
   </if>
        ) videoCount
        FROM
        sys_office so
        INNER JOIN ff_server_project_manage pm ON pm.city_company = so.id
        <where>
            ${dataScope}
            <if test="cityCompanyId != null and cityCompanyId != ''">
    AND so.id = #{cityCompanyId}
   </if>
        </where>
        GROUP BY
        pm.project_name
        ORDER BY pm.create_date DESC
        ) as a
</select>

Page对象



package com.jeeplus.core.persistence;
 
import java.util.ArrayList;
import java.util.List;
import java.util.regex.Pattern;
 
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
import org.apache.commons.lang3.StringUtils;
 
import com.fasterxml.jackson.annotation.JsonIgnore;
import com.jeeplus.common.config.Global;
import com.jeeplus.common.utils.CookieUtils;
 

public class Page<T> {
 
 protected int pageNo = 1; // 当前页码
 protected int pageSize = Integer.valueOf(Global.getConfig("page.pageSize")); // 页面大小,设置为“-1”表示不进行分页(分页无效)
 
 protected long count;// 总记录数,设置为“-1”表示不查询总数
 
 protected int first;// 首页索引
 protected int last;// 尾页索引
 protected int prev;// 上一页索引
 protected int next;// 下一页索引
 
 private boolean firstPage;//是否是第一页
 private boolean lastPage;//是否是最后一页
 
 protected int length = 8;// 显示页面长度
 protected int slider = 1;// 前后显示页面长度
 
 private List<T> list = new ArrayList<T>();
 
 private String orderBy = ""; // 标准查询有效, 实例: updatedate desc, name asc
 
 protected String funcName = "page"; // 设置点击页码调用的js函数名称,默认为page,在一页有多个分页对象时使用。
 
 protected String funcParam = ""; // 函数的附加参数,第三个参数值。
 
 private String message = ""; // 设置提示消息,显示在“共n条”之后
 
 public Page() {
  this.pageSize = -1;
 }
 
 
 public Page(HttpServletRequest request, HttpServletResponse response){
  this(request, response, -2);
 }
 
 
 public Page(HttpServletRequest request, HttpServletResponse response, int defaultPageSize){
  // 设置页码参数(传递repage参数,来记住页码)
  String no = request.getParameter("pageNo");
  if (StringUtils.isNumeric(no)){
   CookieUtils.setCookie(response, "pageNo", no);
   this.setPageNo(Integer.parseInt(no));
  }else if (request.getParameter("repage")!=null){
   no = CookieUtils.getCookie(request, "pageNo");
   if (StringUtils.isNumeric(no)){
    this.setPageNo(Integer.parseInt(no));
   }
  }
  // 设置页面大小参数(传递repage参数,来记住页码大小)
  String size = request.getParameter("pageSize");
  if (StringUtils.isNumeric(size)){
   CookieUtils.setCookie(response, "pageSize", size);
   this.setPageSize(Integer.parseInt(size));
  }else if (request.getParameter("repage")!=null){
   no = CookieUtils.getCookie(request, "pageSize");
   if (StringUtils.isNumeric(size)){
    this.setPageSize(Integer.parseInt(size));
   }
  }else if (defaultPageSize != -2){
   this.pageSize = defaultPageSize;
  }else if ("-1".equals(size)){
   this.pageSize = -1;
  }
  // 设置排序参数
  String orderBy = request.getParameter("orderBy");
  if (StringUtils.isNotBlank(orderBy)){
   this.setOrderBy(orderBy);
  }
 }
 
 
 public Page(int pageNo, int pageSize) {
  this(pageNo, pageSize, 0);
 }
 
 
 public Page(int pageNo, int pageSize, long count) {
  this(pageNo, pageSize, count, new ArrayList<T>());
 }
 
 
 public Page(int pageNo, int pageSize, long count, List<T> list) {
  this.setCount(count);
  this.setPageNo(pageNo);
  this.pageSize = pageSize;
  this.list = list;
 }
 
 
 public void initialize(){
    
  //1
  this.first = 1;
  
  this.last = (int)(count / (this.pageSize < 1 ? 20 : this.pageSize) + first - 1);
  
  if (this.count % this.pageSize != 0 || this.last == 0) {
   this.last++;
  }
 
  if (this.last < this.first) {
   this.last = this.first;
  }
  
  if (this.pageNo <= 1) {
   this.pageNo = this.first;
   this.firstPage=true;
  }
 
  if (this.pageNo >= this.last) {
   this.pageNo = this.last;
   this.lastPage=true;
  }
 
  if (this.pageNo < this.last - 1) {
   this.next = this.pageNo + 1;
  } else {
   this.next = this.last;
  }
 
  if (this.pageNo > 1) {
   this.prev = this.pageNo - 1;
  } else {
   this.prev = this.first;
  }
  
  //2
  if (this.pageNo < this.first) {// 如果当前页小于首页
   this.pageNo = this.first;
  }
 
  if (this.pageNo > this.last) {// 如果当前页大于尾页
   this.pageNo = this.last;
  }
  
 }
 
 
 @Override
 public String toString() {
 
  StringBuilder sb = new StringBuilder();
  sb.append("<div class=\"fixed-table-pagination\" style=\"display: block;\">");
//  sb.append("<div class=\"dataTables_info\">");
//  sb.append("<li class=\"disabled controls\"><a href=\"javascript:\">当前 ");
//  sb.append("<input type=\"text\" value=\""+pageNo+"\" onkeypress=\"var e=window.event||this;var c=e.keyCode||e.which;if(c==13)");
//  sb.append(funcName+"(this.value,"+pageSize+",'"+funcParam+"');\" onclick=\"this.select();\"/> / ");
//  sb.append("<input type=\"text\" value=\""+pageSize+"\" onkeypress=\"var e=window.event||this;var c=e.keyCode||e.which;if(c==13)");
//  sb.append(funcName+"("+pageNo+",this.value,'"+funcParam+"');\" onclick=\"this.select();\"/> 条,");
//  sb.append("共 " + count + " 条"+(message!=null?message:"")+"</a></li>\n");
//  sb.append("</div>");
  long startIndex = (pageNo-1)*pageSize + 1;
  long endIndex = pageNo*pageSize <=count? pageNo*pageSize:count;
  
  sb.append("<div class=\"pull-left pagination-detail\">");
  sb.append("<span class=\"pagination-info\">显示第 "+startIndex+" 到第 "+ endIndex +" 条记录,总共 "+count+" 条记录</span>");
  sb.append("<span class=\"page-list\">每页显示 <span class=\"btn-group dropup\">");
  sb.append("<button type=\"button\" class=\"btn btn-default  btn-outline dropdown-toggle\" data-toggle=\"dropdown\" aria-expanded=\"false\">");
  sb.append("<span class=\"page-size\">"+pageSize+"</span> <span class=\"caret\"></span>");
  sb.append("</button>");
  sb.append("<ul class=\"dropdown-menu\" role=\"menu\">");
  sb.append("<li class=\""+getSelected(pageSize,10)+ "\"><a href=\"javascript:"+funcName+"("+pageNo+",10,'"+funcParam+"');\">10</a></li>");
  sb.append("<li class=\""+getSelected(pageSize,25)+ "\"><a href=\"javascript:"+funcName+"("+pageNo+",25,'"+funcParam+"');\">25</a></li>");
  sb.append("<li class=\""+getSelected(pageSize,50)+ "\"><a href=\"javascript:"+funcName+"("+pageNo+",50,'"+funcParam+"');\">50</a></li>");
  sb.append("<li class=\""+getSelected(pageSize,100)+ "\"><a href=\"javascript:"+funcName+"("+pageNo+",100,'"+funcParam+"');\">100</a></li>");
  sb.append("</ul>");
  sb.append("</span> 条记录</span>");
  sb.append("</div>");
//  sb.append("<p>每页 <select onChange=\""+funcName+"("+pageNo+",this.value,'"+funcParam+"');\"" +"style=\"display:display  !important;\" class=\"form-control m-b input-sm\">" +
//          "<option value=\"10\" "+getSelected(pageSize,10)+ ">10</option>" +
//    "<option value=\"25\" "+getSelected(pageSize,25)+ ">25</option>" +
//    "<option value=\"50\" "+getSelected(pageSize,50)+ ">50</option>" +
//    "<option value=\"100\" "+getSelected(pageSize,100)+ ">100</option>" +
//    "</select> 条记录,显示 " +startIndex+ " 到 "+ endIndex +" 条,共 "+count+" 条</p>");
//  sb.append("</div>");
//  sb.append("</div>");
  
  
  
  
  sb.append("<div class=\"pull-right pagination-roll\">");
  sb.append("<ul class=\"pagination pagination-outline\">");
  if (pageNo == first) {// 如果是首页
   sb.append("<li class=\"paginate_button previous disabled\"><a href=\"javascript:\"><i class=\"fa fa-angle-double-left\"></i></a></li>\n");
   sb.append("<li class=\"paginate_button previous disabled\"><a href=\"javascript:\"><i class=\"fa fa-angle-left\"></i></a></li>\n");
  } else {
   sb.append("<li class=\"paginate_button previous\"><a href=\"javascript:\" onclick=\""+funcName+"("+first+","+pageSize+",'"+funcParam+"');\"><i class=\"fa fa-angle-double-left\"></i></a></li>\n");
   sb.append("<li class=\"paginate_button previous\"><a href=\"javascript:\" onclick=\""+funcName+"("+prev+","+pageSize+",'"+funcParam+"');\"><i class=\"fa fa-angle-left\"></i></a></li>\n");
  }
 
  int begin = pageNo - (length / 2);
 
  if (begin < first) {
   begin = first;
  }
 
  int end = begin + length - 1;
 
  if (end >= last) {
   end = last;
   begin = end - length + 1;
   if (begin < first) {
    begin = first;
   }
  }
 
  if (begin > first) {
   int i = 0;
   for (i = first; i < first + slider && i < begin; i++) {
    sb.append("<li class=\"paginate_button \"><a href=\"javascript:\" onclick=\""+funcName+"("+i+","+pageSize+",'"+funcParam+"');\">"
      + (i + 1 - first) + "</a></li>\n");
   }
   if (i < begin) {
    sb.append("<li class=\"paginate_button disabled\"><a href=\"javascript:\">...</a></li>\n");
   }
  }
 
  for (int i = begin; i <= end; i++) {
   if (i == pageNo) {
    sb.append("<li class=\"paginate_button active\"><a href=\"javascript:\">" + (i + 1 - first)
      + "</a></li>\n");
   } else {
    sb.append("<li class=\"paginate_button \"><a href=\"javascript:\" onclick=\""+funcName+"("+i+","+pageSize+",'"+funcParam+"');\">"
      + (i + 1 - first) + "</a></li>\n");
   }
  }
 
  if (last - end > slider) {
   sb.append("<li class=\"paginate_button disabled\"><a href=\"javascript:\">...</a></li>\n");
   end = last - slider;
  }
 
  for (int i = end + 1; i <= last; i++) {
   sb.append("<li class=\"paginate_button \"><a href=\"javascript:\" onclick=\""+funcName+"("+i+","+pageSize+",'"+funcParam+"');\">"
     + (i + 1 - first) + "</a></li>\n");
  }
 
  if (pageNo == last) {
   sb.append("<li class=\"paginate_button next disabled\"><a href=\"javascript:\"><i class=\"fa fa-angle-right\"></i></a></li>\n");
   sb.append("<li class=\"paginate_button next disabled\"><a href=\"javascript:\"><i class=\"fa fa-angle-double-right\"></i></a></li>\n");
  } else {
   sb.append("<li class=\"paginate_button next\"><a href=\"javascript:\" onclick=\""+funcName+"("+next+","+pageSize+",'"+funcParam+"');\">"
     + "<i class=\"fa fa-angle-right\"></i></a></li>\n");
   sb.append("<li class=\"paginate_button next\"><a href=\"javascript:\" onclick=\""+funcName+"("+last+","+pageSize+",'"+funcParam+"');\">"
     + "<i class=\"fa fa-angle-double-right\"></i></a></li>\n");
  }
 
  
        sb.append("</ul>");
        sb.append("</div>");
        sb.append("</div>");
//  sb.insert(0,"<ul>\n").append("</ul>\n");
  
//  sb.append("<div style=\"clear:both;\"></div>");
 
//  sb.insert(0,"<div class=\"page\">\n").append("</div>\n");
  
  return sb.toString();
 }
 
 protected String getSelected(int pageNo, int selectedPageNo){
  if(pageNo == selectedPageNo){
   //return "selected";
   return "active";
  }else{
   return "";
  }
  
 }
 
 public String getHtml(){
  return toString();
 }
 
// public static void main(String[] args) {
//  Page<String> p = new Page<String>(3, 3);
//  System.out.println(p);
//  System.out.println("首页:"+p.getFirst());
//  System.out.println("尾页:"+p.getLast());
//  System.out.println("上页:"+p.getPrev());
//  System.out.println("下页:"+p.getNext());
// }
 
 
 public long getCount() {
  return count;
 }
 
 
 public void setCount(long count) {
  this.count = count;
  if (pageSize >= count){
   pageNo = 1;
  }
 }
 
 
 public int getPageNo() {
  return pageNo;
 }
 
 
 public void setPageNo(int pageNo) {
  this.pageNo = pageNo;
 }
 
 
 public int getPageSize() {
  return pageSize;
 }
 
 
 public void setPageSize(int pageSize) {
  this.pageSize = pageSize <= 0 ? 10 : pageSize;// > 500 ? 500 : pageSize;
 }
 
 
 @JsonIgnore
 public int getFirst() {
  return first;
 }
 
 
 @JsonIgnore
 public int getLast() {
  return last;
 }
 
 
 @JsonIgnore
 public int getTotalPage() {
  return getLast();
 }
 
 
 @JsonIgnore
 public boolean isFirstPage() {
  return firstPage;
 }
 
 
 @JsonIgnore
 public boolean isLastPage() {
  return lastPage;
 }
 
 
 @JsonIgnore
 public int getPrev() {
  if (isFirstPage()) {
   return pageNo;
  } else {
   return pageNo - 1;
  }
 }
 
 
 @JsonIgnore
 public int getNext() {
  if (isLastPage()) {
   return pageNo;
  } else {
   return pageNo + 1;
  }
 }
 
 
 public List<T> getList() {
  return list;
 }
 
 
 public Page<T> setList(List<T> list) {
  this.list = list;
  initialize();
  return this;
 }
 
 
 @JsonIgnore
 public String getOrderBy() {
  // sql过滤,防止注入 
  String reg = "(?:')|(?:--)|(/\\*(?:.|[\\n\\r])*?\\*/)|"
     + "(\\b(select|update|and|or|delete|insert|trancate|char|into|substr|ascii|declare|exec|count|master|into|drop|execute)\\b)";
  Pattern sqlPattern = Pattern.compile(reg, Pattern.CASE_INSENSITIVE);
  if (sqlPattern.matcher(orderBy).find()) {
   return "";
  }
  return orderBy;
 }
 
 
 public void setOrderBy(String orderBy) {
  this.orderBy = orderBy;
 }
 
 
 @JsonIgnore
 public String getFuncName() {
  return funcName;
 }
 
 
 public void setFuncName(String funcName) {
  this.funcName = funcName;
 }
 
 
 @JsonIgnore
 public String getFuncParam() {
  return funcParam;
 }
 
 
 public void setFuncParam(String funcParam) {
  this.funcParam = funcParam;
 }
 
 
 public void setMessage(String message) {
  this.message = message;
 }
 
 
 @JsonIgnore
 public boolean isDisabled() {
  return this.pageSize==-1;
 }
 
 
 @JsonIgnore
 public boolean isNotCount() {
  return this.count==-1;
 }
 
 
 public int getFirstResult(){
  int firstResult = (getPageNo() - 1) * getPageSize();
  if (firstResult >= getCount() || firstResult<0) {
   firstResult = 0;
  }
  return firstResult;
 }
 
 public int getMaxResults(){
  return getPageSize();
 }
 
// 
// public Pageable getspringPage(){
//  List<Order> orders = new ArrayList<Order>();
//  if (orderBy!=null){
//   for (String order : StringUtils.split(orderBy, ",")){
//    String[] o = StringUtils.split(order, " ");
//    if (o.length==1){
//     orders.add(new Order(Direction.ASC, o[0]));
//    }else if (o.length==2){
//     if ("DESC".equals(o[1].toUpperCase())){
//      orders.add(new Order(Direction.DESC, o[0]));
//     }else{
//      orders.add(new Order(Direction.ASC, o[0]));
//     }
//    }
//   }
//  }
//  return new PageRequest(this.pageNo - 1, this.pageSize, new Sort(orders));
// }
// 
// 
// public void setSpringPage(org.springframework.data.domain.Page<T> page){
//  this.pageNo = page.getNumber();
//  this.pageSize = page.getSize();
//  this.count = page.getTotalElements();
//  this.list = page.getContent();
// }
 
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程网。

--结束END--

本文标题: bootstrap Table的使用方法总结

本文链接: https://lsjlt.com/news/126215.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • bootstrap Table的使用方法总结
    本文为大家分享了bootstrap Table的使用方法,供大家参考,具体内容如下 官网资料 效果图: 案例: html <!-- 表格 --> <table...
    99+
    2024-04-02
  • Bootstrap中table的使用方法
    这篇文章主要为大家展示了“Bootstrap中table的使用方法”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“Bootstrap中table的使用方法”这篇文...
    99+
    2024-04-02
  • Bootstrap Table使用方法详解
    Bootstrap Table 是一个功能强大的 jQuery 表格插件,可以实现表格的分页、排序、搜索等功能。下面详细介绍一下 Bootstrap Table 的使用方法。1. 引入必要的文件在使用 Bootstrap Table 之...
    99+
    2023-08-11
    使用方法
  • bootstrap Table如何使用
    这篇文章给大家分享的是有关bootstrap Table如何使用的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。效果图:案例:html<!-- 表格 --><table&nbs...
    99+
    2023-06-15
  • javascript的setTimeout()使用方法总结
    1、前言js的setTimeout方法用处比较多,通常用在页面刷新了、延迟执行了等等。但是很多javascript新手对setTimeout的用法还是不是很了解。虽然我学习和应用javascript已经两年多了,但是对setTimeout方...
    99+
    2022-06-07
    javascript setTimeout()用法
  • Android onCreateOptionsMenu的使用方法总结
    Android onCreateOptionsMenu的使用方法总结任何一款软件都少不了对“菜单”的使用。在Android下,每一个activity都捆绑了一个Menu,要想定义和使用菜单,都必须在Activity下进行操作,复写onCre...
    99+
    2023-05-30
    android oncreateoptionsmenu roi
  • Android WebView的使用方法总结
     Android WebView的使用方法  Android app打开H5页一般要实现如下需求:打开指定url网页;2、点击链接可以跳转到下一页,并更新标题;3、按back键或左箭头可以返回上一页;4、当webview...
    99+
    2023-05-30
    android webview roi
  • Bootstrap中Table的使用示例
    这篇文章将为大家详细讲解有关Bootstrap中Table的使用示例,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。一、Bootstrap Table相关整理基于 Boot...
    99+
    2024-04-02
  • bootstrap的使用方法
    Bootstrap是一个开源的前端框架,用于快速开发响应式网站和Web应用程序。以下是使用Bootstrap的一些基本方法:1. 下...
    99+
    2023-09-21
    bootstrap
  • Android Notification使用方法总结
    Android Notification使用方法总结一. 基本使用1.构造notification NotificationCompat.Builder mBuilder = new NotificationCompat.Builder(a...
    99+
    2023-05-30
    android notification roi
  • Python 中enum的使用方法总结
    目录1.为什么要用enum,什么时候使用enum2.enum的定义/声明3.遍历成员4.继承Enum的类中定义方法5.将Enum类属性的值定义为函数或方法6.自定义异常处理7.enu...
    99+
    2024-04-02
  • bootstrap中Table的操作方法有哪些
    这篇文章主要介绍bootstrap中Table的操作方法有哪些,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!具体内容如下function HQCreatTable(ob)&...
    99+
    2024-04-02
  • python enumerate函数的使用方法总结
    enumerate函数用于遍历序列中的元素以及它们的下标。 enumerate函数说明: enumerate()是python的内置函数 enumerate在字典上是枚举、列举的意思 函数原型:enu...
    99+
    2022-06-04
    使用方法 函数 python
  • wingIDE的安装与使用方法总结
    Wing IDE 是一个集成开发环境(IDE),主要用于编写和调试 Python 程序。以下是 Wing IDE 的安装和使用方法的...
    99+
    2023-09-14
    wingIDE
  • Flask中Bootstrap的使用方法
    小编给大家分享一下Flask中Bootstrap的使用方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!在视图的选择上,我们已经学习了模板引擎的方法。不过有些小伙...
    99+
    2023-06-14
  • Pandas Query方法使用深度总结
    目录获取数据载入数据使用 query() 方法以 In-place 的方式执行 query 方法指定多个条件查询比较数值列比较多个列查询索引比较多列总结大多数 Pandas 用户都熟...
    99+
    2024-04-02
  • python之字典使用方法总结
    文章转载一个博客,文章概括字典很全,但是排版很乱,自己整理了一下数据字典 字典(dictionary)是除列表之外python之中最灵活的内置数据结构类型。列表是有序的对象结合,字典是无序的对象集合。两者之间的区别在于:字典当中的元素是通过...
    99+
    2023-01-31
    使用方法 字典 python
  • bootstrap框架中table如何使用
    这篇文章主要讲解了“bootstrap框架中table如何使用”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“bootstrap框架中table如何使用”吧!...
    99+
    2024-04-02
  • Android 布局中的android:onClick的使用方法总结
    Android 布局中的android:onClick的使用方法总结Android布局中的 android:onClick=“...”属性设置点击时从上下文中调用指定的方法。该属性值和要调用的方法名称完全一致。一般在Activity定义符合...
    99+
    2023-05-30
    android onclick roi
  • Vue表格组件Vxe-table使用技巧总结
    目录前言1、树形结构配置:2、获取全局table对象:3、使用多选框注意事项:4、编辑行或单元格注意事项:5、表尾数据合并问题:6、仅显示已勾选功能讲解:7、解决初始数据半选中状态失...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作