bootstrap-table 前端使用总结

最新推荐文章于 2024-09-15 00:20:13 发布

vvLu22

最新推荐文章于 2024-09-15 00:20:13 发布

阅读量1k

点赞数

分类专栏： jq table 文章标签： bootstrap-table ajax 分页跳转到指定页

本文链接：https://blog.csdn.net/vvLu22/article/details/79074043

版权

jq table 专栏收录该内容

0 篇文章 0 订阅

订阅专栏

本文总结了使用bootstrap-table进行前端展示的经验，重点探讨了如何实现带分页的表格，并指出尽管API中未直接提供跳转到指定页的功能，但可以通过修改bootstrap-table的JavaScript源码来实现这一需求。

摘要由CSDN通过智能技术生成

1.bootstrap-table文档
2.带分页的table
效果图

//需要引入的文件
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="css/bootstrap-table.css" />
<script src="/jquery-3.1.1.min.js"></script>
<script src="js/bootstrap-table.js">
// html
<table id="table_server" ></table>
// js
// 先销毁table
$('#table_server').bootstrapTable('destroy');
$("#table_server").bootstrapTable({
    url: url,
    method: 'get',
    dataType: "json",
    striped: true,//设置为 true 会有隔行变色效果
    undefinedText: "暂无数据",//当数据为 undefined 时显示的字符
    pagination: true, //分页
    showToggle: false,//是否显示 切换试图（table/card）按钮
    showColumns: false,//是否显示 内容列下拉框
    pageNumber: 1,//如果设置了分页，首页页码
    pageSize: 100,//如果设置了分页，页面数据条数
    pageList: [50, 100],  //如果设置了分页，设置可供选择的页面数据条数。设置为All 则显示所有记录。
    paginationPreText: '<',//指定分页条中上一页按钮的图标或文字,这里是<
    paginationNextText: '>',//指定分页条中下一页按钮的图标或文字,这里是>
    paginationLoop: false,
    search: false, //显示搜索框
    data_local: "zh-US",//表格汉化
    height:'600',
    sidePagination: "server", //服务端处理分页
    queryParams: function (params) {
        //自定义参数，这里的参数是传给后台的
        return {
             //这里的params是table提供的
             pageNumber: params.offset,//从数据库第几条记录开始
             pageSize: params.limit,//找多少条
             type:"2" // 自定义的参数，后台需要的
        };
     },
     onLoadSuccess: function(){ 
         //加载成功时执行 跳转到指定页码
        $('.pageBtn').click(function(){
              toPage()
          })
    },
   idField: "key",//指定主键列
   columns: [{
      title: 'Url',//表的列名
      field: 'key',//json数据中rows数组中的属性名
      align: 'center',//水平居中,
      formatter:function(value, row, index){
          return ('<a href='+value+'style="display:block">'+value+'</a>')
        }
   }]
});

// 跳转到指定页码
function toPage() {
  var pageNum = $("#pageNum").val();
  if (pageNum) {
    $('#table_server').bootstrapTable('selectPage', parseInt(pageNum));
  }
}

注意：api里没有提供跳转页面的方法，需要去bootstrap-table里修改js源码

// bootstrap-table.js 里找到 class="pagination' 
//把  
html.push('</div>',
'<div class="pull-' + this.options.paginationHAlign + ' pagination">',
'<ul class="pagination' + sprintf(' pagination-%s', this.options.iconSize) + '">',
'<li class="page-pre"><a href="#">' + this.options.paginationPreText + '</a></li>');
//改为
html.push('</div>',
    '<div class="goPage"><input type="button" value="跳转" class="pageBtn" ></div>',
    '<div class="goPage">跳转到第<input id="pageNum" class="pageNum" type="text">页</div>',
    '<div class="pull-' + this.options.paginationHAlign + ' pagination">',
    '<ul class="pagination' + sprintf(' pagination-%s', this.options.iconSize) + '">',
    '<li class="page-pre"><a href="javascript:void(0)" rel="external nofollow" rel="external nofollow" >' + this.options.paginationPreText + '</a></li>');
// bootstrap-table.css里添加（这个可以根据需要添加）
.pageNum {
  width: 40px;
  border-radius: 3px;
}
.goPage {
  float: right;
  margin-left: 5px;
  margin-top: 13px;
  height: 30px;
}
// 要实现的功能在上面js里已经展示