您的位置:68399皇家赌场 > 服务器租用 > 应用bootstraptable插件实现表格记录的查询、分页、

应用bootstraptable插件实现表格记录的查询、分页、

发布时间:2019-08-23 21:45编辑:服务器租用浏览(166)

    Bootstrap table使用格局详细介绍,bootstraptable

    bootstrap-table是三个相当好用的报表插件,提供了相当多工具及分页、寻找等效果。

    率先大家供给下边多少个公文,

    <!-- bootstrap table --> 
    <script type="text/javascript" src="${pageContext.request.contextPath}/res/jquery-1.10.2/jquery.js"></script> 
    <!-- bootstrap --> 
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/res/bootstrap/css/bootstrap.css"/> 
    <script type="text/javascript" src="${pageContext.request.contextPath}/res/bootstrap/js/bootstrap.js"></script> 
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/res/bootstrap-table/bootstrap-table.css"/> 
    <script type="text/javascript" src="${pageContext.request.contextPath}/res/bootstrap-table/bootstrap-table.js"></script> 
    <!-- bootstrap table中文包 --> 
    <script type="text/javascript" src="${pageContext.request.contextPath}/res/bootstrap-table/locale/bootstrap-table-zh-CN.js"></script> 
    

    中文包好像能够免范少数bug

    若果您独自引入那些文件而导致体制出错,请下载完整的bootstrap-table

    下面是bootstrap-table的加载

    <script type="text/javascript"> 
    $(function () { 
    
     //1.初始化Table 
     var oTable = new TableInit(); 
     oTable.Init(); 
    }); 
    
    
    var TableInit = function () { 
     var oTableInit = new Object(); 
     //初始化Table 
     oTableInit.Init = function () { 
      $('#tb_departments').bootstrapTable({ 
       url: '${pageContext.request.contextPath}/AlarmInfo/list',   //请求后台的URL(*) 
       method: 'get',      //请求方式(*) 
       toolbar: '#toolbar',    //工具按钮用哪个容器 
       striped: false,      //是否显示行间隔色 
       cache: false,      //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*) 
       pagination: true,     //是否显示分页(*) 
       sortable: false,      //是否启用排序 
       sortOrder: "asc",     //排序方式 
       queryParams: oTableInit.queryParams,//传递参数(*) 
       sidePagination: "server",   //分页方式:client客户端分页,server服务端分页(*) 
       pageNumber:1,      //初始化加载第一页,默认第一页 
       pageSize: 10,      //每页的记录行数(*) 
       pageList: [10, 25, 50, 100],  //可供选择的每页的行数(*) 
       search: false,      //是否显示表格搜索,此搜索是客户端搜索,不会进服务端,所以,个人感觉意义不大 
       strictSearch: true, 
       showColumns: true,     //是否显示所有的列 
       showRefresh: false,     //是否显示刷新按钮 
       minimumCountColumns: 2,    //最少允许的列数 
       clickToSelect: true,    //是否启用点击选中行 
       height: 500,      //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度 
       uniqueId: "id",      //每一行的唯一标识,一般为主键列 
       showToggle:true,     //是否显示详细视图和列表视图的切换按钮 
       cardView: true,     //是否显示详细视图 
       detailView: false,     //是否显示父子表 
       columns: [{ 
        checkbox: true 
       }, { 
        field: 'Id', 
        title: '编号' 
       }, { 
        field: 'Name', 
        title: '姓名' 
       }, { 
        field: 'Type', 
        title: '类型' 
       },{ 
        field: 'Time', 
        title: '时间' 
       } 
    
       ] 
      }); 
     }; 
    
    </script> 
    
    <head> 
    <body> 
     <div class="panel-body" style="padding-bottom:0px;"> 
       <table id="tb_departments"></table> 
      </div> 
    </body> 
    </head> 
    

    以上正是本文的全体内容,希望对大家的上学抱有援救,也意在咱们多多援救帮客之家。

    table使用办法详细介绍,bootstraptable bootstrap-table是三个不胜好用的表格插件,提供了成千上万工具及分页、搜索等职能。 首先大家需求下...

    使用bootstraptable插件完成表格记录的询问、分页、排序操作,bootstraptable插件

    在职业系统开垦中,对表格记录的询问、分页、排序等拍卖是特别广泛的,在Web开拓中,能够选取非常多功能庞大的插件来满意供给,且能十分大的拉长支付成效,本随笔介绍那一个bootstrap-table是一款特别盛名的开源表格插件,在成千上万品种中分布的选取。Bootstrap-table插件提供了非常丰富的特性设置,能够达成查询、分页、排序、复选框、设置显示列、Cardview视图、主从表突显、合併列、国际化管理等拍卖作用,并且该插件同时也提供了有个别不易的扩姜至鹏能,如运动行、移动列地点等部分新鲜的职能,插件能够用基于HTML5的data-*特性标记设置,也能够运用Javascript格局开展安装,特别有助于。本篇小说介绍bootstrap-table插件在作者实在项目中的应用意况,总括相关应用中遇见的标题处理经验。

    1、Bootstrap-table财富及应用介绍

    在GitHub上Bootstrap-table的源码地址是:

    Bootstrap-table的文书档案地址:

    Bootstrap-table的各样样例:

    Bootstrap-Table展现数据到表格的点子有三种,一种是顾客端(client)形式,一种是服务器(server)方式。

      所谓客商端形式,指的是在服务器中把要突显到表格的多少一回性加载出来,然后调换到JSON格式传到要来得的分界面中,顾客端情势较为轻便,它是把数据三遍性加载出来放到分界面上,然后依照你设置的每页记录数,自动生成分页。当点击第二页时,会活动加载出多少,不会再向服务器发送央浼。同期用户能够运用其自带的查找成效,能够兑现全体据检索。对于数据量非常少的时候,可以动用那一个艺术。

      所谓服务器形式,指的是依据设定的每页记录数和近期要显得的页码,发送数据到服务器实行查询,然后再展现到表格中。该格局能够依赖客户的须要动态的加载数据,节省了服务器的财富,然则不可能利用其自带的全体据检索作用。

    Bootstrap-table是基于Boostrap开辟的插件,由此使用的时候,须求引进Bootstrap的本子和体制。

    若果大家项目中未有引进相关的文本,则须要引进这个样式和本子文件,如下所示。

    www.68399.com 1

    <link rel="stylesheet" href="bootstrap.min.css" rel="external nofollow" >
    <script src="jquery.min.js"></script>
    <script src="bootstrap.min.js"></script>
    

    唯独上述内容,在咱们开辟品种的时候都必然有个别了,所以我们依然把大旨放到使用这些插件所须要的引进文件上来。

    CSS文件引进

    <link rel="stylesheet" href="bootstrap-table.css" rel="external nofollow" >
    

    剧本文件引进

    <script src="bootstrap-table.js"></script>
    <--汉化文件,放在 bootstrap-table.js 后面-->
    <script src="bootstrap-table-zh-CN.js"></script>
    

     一般的话大家只假使基于MVC开荒的种类,CSS和JS的代码,都以身处BundleConfig.cs里面伊始化的,如下所示

    bootstrap-table在页面中的使用,能够分成二种,一种是原原本本用HTML5的写法,通过data-*的点子钦命各样质量设置,一种是HTML JS形式达成弹性装置。

    借使大家使用HTML5标记的措施初叶化HTML代码,则是上面的代码。

    <table data-toggle="table" data-url="data1.json">
     <thead>
      <tr>
       <th data-field="id">Item ID</th>
       <th data-field="name">Item Name</th>
       <th data-field="price">Item Price</th>
      </tr>
     </thead>
    </table>
    

    一经大家运用JS代码格局来开头化表格插件,那么只供给在HTML上声澳优个报表对象就可以,如下代码。

    <table id="table"></table>
    

    然后轻松的JS代码开端化如下所示

    $('#table').bootstrapTable({
     url: 'data1.json',
     columns: [{
      field: 'id',
      title: 'Item ID'
     }, {
      field: 'name',
      title: 'Item Name'
     }, {
      field: 'price',
      title: 'Item Price'
     }, ]
    });
    

    唯独事实上大家使用 bootstrap-table的JS配置效应自然比这几个纷纭比很多,上面分界面效果是实际表的数目显示。

    www.68399.com 2

    2、bootstrap-table的详实使用

    1)整个JS属性配置

    在上海教室中,我们是应用JS格局实行开端化表格内容的,JS代码如下所示

     var $table;
      //初始化bootstrap-table的内容
      function InitMainTable () {
       //记录页面bootstrap-table全局变量$table,方便应用
       var queryUrl = '/TestUser/FindWithPager?rnd='   Math.random()
       $table = $('#grid').bootstrapTable({
        url: queryUrl,      //请求后台的URL(*)
        method: 'GET',      //请求方式(*)
        //toolbar: '#toolbar',    //工具按钮用哪个容器
        striped: true,      //是否显示行间隔色
        cache: false,      //是否使用缓存,默认为true,所以一般情况下需要设置一下这个属性(*)
        pagination: true,     //是否显示分页(*)
        sortable: true,      //是否启用排序
        sortOrder: "asc",     //排序方式
        sidePagination: "server",   //分页方式:client客户端分页,server服务端分页(*)
        pageNumber: 1,      //初始化加载第一页,默认第一页,并记录
        pageSize: rows,      //每页的记录行数(*)
        pageList: [10, 25, 50, 100],  //可供选择的每页的行数(*)
        search: false,      //是否显示表格搜索
        strictSearch: true,
        showColumns: true,     //是否显示所有的列(选择显示的列)
        showRefresh: true,     //是否显示刷新按钮
        minimumCountColumns: 2,    //最少允许的列数
        clickToSelect: true,    //是否启用点击选中行
        //height: 500,      //行高,如果没有设置height属性,表格自动根据记录条数觉得表格高度
        uniqueId: "ID",      //每一行的唯一标识,一般为主键列
        showToggle: true,     //是否显示详细视图和列表视图的切换按钮
        cardView: false,     //是否显示详细视图
        detailView: false,     //是否显示父子表
        //得到查询的参数
        queryParams : function (params) {
         //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的
         var temp = { 
          rows: params.limit,       //页面大小
          page: (params.offset / params.limit)   1, //页码
          sort: params.sort,  //排序列名 
          sortOrder: params.order //排位命令(desc,asc) 
         };
         return temp;
        },
        columns: [{
         checkbox: true, 
         visible: true     //是否显示复选框 
        }, {
         field: 'Name',
         title: '姓名',
         sortable: true
        }, {
         field: 'Mobile',
         title: '手机',
         sortable: true
        }, {
         field: 'Email',
         title: '邮箱',
         sortable: true,
         formatter: emailFormatter
        }, {
         field: 'Homepage',
         title: '主页',
         formatter: linkFormatter
        }, {
         field: 'Hobby',
         title: '兴趣爱好'
        }, {
         field: 'Gender',
         title: '性别',
         sortable: true
        }, {
         field: 'Age',
         title: '年龄'
        }, {
         field: 'BirthDate',
         title: '出生日期',
         formatter: dateFormatter
        }, {
         field: 'Height',
         title: '身高'
        }, {
         field: 'Note',
         title: '备注'
        }, {
         field:'ID',
         title: '操作',
         width: 120,
         align: 'center',
         valign: 'middle',
         formatter: actionFormatter
        }, ],
        onLoadSuccess: function () {
        },
        onLoadError: function () {
         showTips("数据加载失败!");
        },
        onDblClickRow: function (row, $element) {
         var id = row.ID;
         EditViewById(id, 'view');
        },
       });
      };
    

    上边JS代码的布局属性,基本上都加了讲明表达,是比较便于精通的了。

    2)查询及分页

    此地的报表数据分页是行使服务器分页的章程,根据查找条件从服务器重临数据记录的,并选拔了排序的处理方式,这里的queryParams参数正是提交到劳动器端的参数了           

     //得到查询的参数
        queryParams : function (params) {
         //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的
         var temp = { 
          rows: params.limit,       //页面大小
          page: (params.offset / params.limit)   1, //页码
          sort: params.sort,  //排序列名 
          sortOrder: params.order //排位命令(desc,asc) 
         };
         return temp;
        },
    

    除此以外大家看到重返数据的URubiconL地址接口是FindWithPager,大家来探视那么些MVC调整器方法是怎么管理数据再次回到的。

    /// <summary>
      /// 根据条件查询数据库,并返回对象集合(用于分页数据显示)
      /// </summary>
      /// <returns>指定对象的集合</returns>
      public override ActionResult FindWithPager()
      {
       //检查用户是否有权限,否则抛出MyDenyAccessException异常
       base.CheckAuthorized(AuthorizeKey.ListKey);
    
       string where = GetPagerCondition();
       PagerInfo pagerInfo = GetPagerInfo();
       var sort = GetSortOrder();
    
       List<TestUserInfo> list = null;
       if (sort != null && !string.IsNullOrEmpty(sort.SortName))
       {
        list = baseBLL.FindWithPager(where, pagerInfo, sort.SortName, sort.IsDesc);
       }
       else
       {
        list = baseBLL.FindWithPager(where, pagerInfo);
       } 
    
       //Json格式的要求{total:22,rows:{}}
       //构造成Json的格式传递
       var result = new { total = pagerInfo.RecordCount, rows = list };
       return ToJsonContent(result);
      }
    

    上边代码管理了三个部分的对象消息,一个是分页实体类消息,二个是排序音讯,然后依据那一个条件获得记录,再次来到类似
    {total:22,rows:{}}

    格式的JSON数据记录。          

    var result = new { total = pagerInfo.RecordCount, rows = list };
       return ToJsonContent(result);
    

    获取分页的参数音信如下所示      

     /// <summary>
      /// 根据Request参数获取分页对象数据
      /// </summary>
      /// <returns></returns>
      protected virtual PagerInfo GetPagerInfo()
      {
       int pageIndex = Request["page"] == null ? 1 : int.Parse(Request["page"]);
       int pageSize = Request["rows"] == null ? 10 : int.Parse(Request["rows"]);
    
       PagerInfo pagerInfo = new PagerInfo();
       pagerInfo.CurrenetPageIndex = pageIndex;
       pagerInfo.PageSize = pageSize;
       return pagerInfo;
      }
    

    获得排序参数音讯的代码如下所示

     /// <summary>
      /// 获取排序的信息
      /// </summary>
      /// <returns></returns>
      protected SortInfo GetSortOrder()
      {
       var name = Request["sort"];
       var order = Request["sortOrder"];
       return new SortInfo(name, order);
      }
    

    最终便是现实落到实处具体条件、具体页码、具体排序条件下的多寡记录了,那有的可以依照本身的渴求落到实处逻辑,这里只是给出三个封装好的拍卖调用就能够。

    baseBLL.FindWithPager(where, pagerInfo, sort.SortName, sort.IsDesc);
    

    实质上情状下,我们列表的来得,一般需求接纳差异的口径举行数量的询问的,纵然那些Bootstrap-table控件提供了一个暗许的查询开关,可是貌似是在客商端分页的场馆下利用,而且略显轻易,大家一般接纳本人询问条件实行处理,如下分界面所示。

    www.68399.com 3

    照旧正如的

    www.68399.com 4

    那正是说这么对于地方的js属性就必要调动下接受询问条件参数queryParams 了            

     //得到查询的参数
        queryParams : function (params) {
         //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的
         var temp = { 
          rows: params.limit,       //页面大小
          page: (params.offset / params.limit)   1, //页码
          sort: params.sort,  //排序列名 
          sortOrder: params.order //排位命令(desc,asc) 
         };
         return temp;
        },
    

    对此自定义查询条件,大家能够用上边包车型地铁健康办法加码参数,如下所示

    www.68399.com 5

    而是查询条件的参数大家不便利一一设置,大家想通过一种较为快捷的格局来管理,那么就需求对那个管理格局举行贰个专程的改换了,首先增添三个恢宏函数来拍卖表单的口径

     //自定义函数处理queryParams的批量增加
      $.fn.serializeJsonObject = function () {
       var json = {};
       var form = this.serializeArray();
       $.each(form, function () {
        if (json[this.name]) {
         if (!json[this.name].push) {
          json[this.name] = [json[this.name]];
         }
         json[this.name].push();
        } else {
         json[this.name] = this.value || '';
        }
       });
       return json;
      }
    

    接下来大家就足以批量甩卖表单的查询条件了        

     queryParams : function (params) {
         //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的
         var temp = $("#ffSearch").serializeJsonObject();
         temp["rows"] = params.limit;      //页面大小
         temp["page"] = (params.offset / params.limit)   1; //页码
         temp["sort"] = params.sort;       //排序列名
         temp["sortOrder"] = params.order;     //排位命令(desc,asc) 
    
         //特殊格式的条件处理
         temp["WHC_Age"] = $("#WHC_Age").val()   "~"   $("#WHC_Age2").val();
         temp["WHC_BirthDate"] = $("#WHC_BirthDate").val()   "~"   $("#WHC_BirthDate2").val();
    
         return temp;
        },
    

    接下来后端统一依据逻辑管理查询参数就能够。

    3)格式化输出函数及其余

    对于位置JS的布署音信,我们再来回看一下,举例对于数据转义函数,能够格式化输出的剧情的,如下分界面代码。

    www.68399.com 6

    格式化的数目转义函数如下,首要正是基于剧情张开格式化输出的JS函数,好疑似供给放在一个文件内。

     //连接字段格式化
      function linkFormatter(value, row, index) {    
       return "<a href='"   value   "' title='单击打开连接' target='_blank'>"   value   "</a>";
      }
      //Email字段格式化
      function emailFormatter(value, row, index) {
       return "<a href='mailto:"   value   "' title='单击打开连接'>"   value   "</a>";
      }
      //性别字段格式化
      function sexFormatter(value) {
       if (value == "女") { color = 'Red'; }
       else if (value == "男") { color = 'Green'; }
       else { color = 'Yellow'; }
    
       return '<div style="color: '   color   '">'   value   '</div>';
      }
    

    别的,大家看来行记录的末尾扩大了多少个操作开关,方便对现阶段记下的查阅、编辑和删除操作,如下效果图所示。

    www.68399.com 7

    那有个别我们也是透过格式化函数进行拍卖的

    www.68399.com 8

     //操作栏的格式化
      function actionFormatter(value, row, index) {
       var id = value;
       var result = "";
       result  = "<a href='javascript:;' class='btn btn-xs green' onclick="EditViewById('"   id   "', view='view')" title='查看'></a>";
       result  = "<a href='javascript:;' class='btn btn-xs blue' onclick="EditViewById('"   id   "')" title='编辑'></a>";
       result  = "<a href='javascript:;' class='btn btn-xs red' onclick="DeleteByIds('"   id   "')" title='删除'></a>";
       return result;
      }
    

     www.68399.com 9

    若是大家需求双击弹出编辑分界面包车型地铁层,大家能够拍卖表格的双击事件,如下代码所示。

          onDblClickRow: function (row, $element) {
              var id = row.ID;
              EditViewById(id, 'view');
            },
    

    假诺咱们必要设置行的不等的体裁展现,能够透过增添rowStyle的JS管理函数就可以,如下代码所示

           rowStyle: function (row, index) { //设置行的特殊样式
              //这里有5个取值颜色['active', 'success', 'info', 'warning', 'danger'];
              var strclass = "";
              if (index == 0) {
                strclass = "warning";
              }
              return { classes: strclass }
            }
    

     对于表格记录的收获,大家得以由此下边的代码实行获取:$table.bootstrapTable('getSelections')

          var rows = $table.bootstrapTable('getSelections');
          if (rows.length > 0) {
            ID = rows[0].ID;
          }
    

    一经是多条记下的拍卖,比方删除记录

        //实现删除数据的方法
        function Delete() {
          var ids = "";//得到用户选择的数据的ID
          var rows = $table.bootstrapTable('getSelections');
          for (var i = 0; i < rows.length; i  ) {
            ids  = rows[i].ID   ',';
          }
          ids = ids.substring(0, ids.length - 1);
          DeleteByIds(ids);
        }
    

    假如急需设置显示列彰显,如下分界面所示

    www.68399.com 10

    以及排序管理

    www.68399.com 11

    那么些需求在JS代码开启相关的品质就能够。

    www.68399.com 12

    还应该有就是一种CardView的卡片视图格式,如下所示。

    www.68399.com 13

    其余一种是父亲和儿子表的实行明细的格式,如下所示

    www.68399.com 14

     以上正是bootstrap-table插件在自己实在项目中的应用情形,基本上对JS各种属性的利用举行了某些介绍了,具体的选拔大家得以参见它的文书档案,获取对应属性、方法、事件的详尽表达,这样我们就足以进一步详细的行使那么些插件的种种功能了。

     

    总结

    如上所述是小编给我们介绍的施用bootstraptable插件落成表格记录的查询、分页、排序操作,希望对大家持有扶助,假诺我们有别的难点接待给小编留言,笔者会及时过来我们的!

    在事情连串开辟中,对表格记录的查询、分页、排序等拍卖是...

    .pageBtn {
    
    }
    .pageNum {
      width: 40px;
      border-radius: 3px;
    }
    .goPage {
      float: right;
      margin-left: 5px;
      margin-top: 13px;
      height: 30px;
    }
    

    对此地方JS的布局音讯,大家再来回看一下,譬喻对于数据转义函数,能够格式化输出的内容的,如下界面代码。

    细心,作者的报表id定义为table,必要将$('#table').bootstrapTable换到你自身定义的id

     //连接字段格式化
      function linkFormatter(value, row, index) {    
       return "<a href='"   value   "' title='单击打开连接' target='_blank'>"   value   "</a>";
      }
      //Email字段格式化
      function emailFormatter(value, row, index) {
       return "<a href='mailto:"   value   "' title='单击打开连接'>"   value   "</a>";
      }
      //性别字段格式化
      function sexFormatter(value) {
       if (value == "女") { color = 'Red'; }
       else if (value == "男") { color = 'Green'; }
       else { color = 'Yellow'; }
    
       return '<div style="color: '   color   '">'   value   '</div>';
      }
    

    您大概感兴趣的小说:

    • 运用bootstraptable插件完结表格记录的询问、分页、排序操作
    • bootstrap table插件的分页与checkbox使用详解
    • bootstrap table分页模板和获取表中的ID方法
    • Bootstrap table三种分页示例
    • DataTables BootStrap组合使用Ajax来获取数据并且动态加载dom的点子(排序,过滤,分页等)

    您只怕感兴趣的篇章:

    • Bootstrap Table使用整理(五)之分页组合查询
    • Bootstrap table学习笔记(2) 前后端分页模糊查询
    • 依附SpringMVC Bootstrap DataTables实现表格服务端分页、模糊查询
    • Bootstrap Table 寻找框和查询功用

    如上,就能够兑现输入页码进行跳转了。效果图如下:

    /// <summary>
      /// 根据条件查询数据库,并返回对象集合(用于分页数据显示)
      /// </summary>
      /// <returns>指定对象的集合</returns>
      public override ActionResult FindWithPager()
      {
       //检查用户是否有权限,否则抛出MyDenyAccessException异常
       base.CheckAuthorized(AuthorizeKey.ListKey);
    
       string where = GetPagerCondition();
       PagerInfo pagerInfo = GetPagerInfo();
       var sort = GetSortOrder();
    
       List<TestUserInfo> list = null;
       if (sort != null && !string.IsNullOrEmpty(sort.SortName))
       {
        list = baseBLL.FindWithPager(where, pagerInfo, sort.SortName, sort.IsDesc);
       }
       else
       {
        list = baseBLL.FindWithPager(where, pagerInfo);
       } 
    
       //Json格式的要求{total:22,rows:{}}
       //构造成Json的格式传递
       var result = new { total = pagerInfo.RecordCount, rows = list };
       return ToJsonContent(result);
      }
    
      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="javascript:void(0)" rel="external nofollow" rel="external nofollow" >'   this.options.paginationPreText   '</a></li>');
    

    www.68399.com 15

    ok,把下面这段代码覆盖成上边的代码       

    www.68399.com 16

    2、然后,在大局css文件里增添以下class

    3)格式化输出函数及其余

    如果需求自定义开关的体制,能够在pgeBtn里面自身定义

     以上就是bootstrap-table插件在本人其实项目中的应用情形,基本上对JS各种属性的应用实行了部分介绍了,具体的利用大家能够参见它的文书档案,获取对应属性、方法、事件的事无巨细表明,那样大家就能够更上一层楼详实的运用这一个插件的各样成效了。

    新类型,希图援引bootstrap-table那么些控件来彰显页面上的表格,无可奈何那款控件的分页工具栏未有跳转到xx页的意义,为了适应公司美术职业(只会出图的图案,却跟本身必要那须要那)的蛋疼要求,硬着头皮改了一晃bootstrap-table的源码,完成了此作用。

    在上海教室中,我们是使用JS形式开展初步化表格内容的,JS代码如下所示

      html.push('</div>',
            '<div class="goPage"><input type="button" value="跳转" class="pageBtn" onclick="toPage();"></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>');
    

    1、Bootstrap-table财富及运用介绍

    各路神明要是有更周密的化解方案,也请留言告知自个儿一声,让自身也学习一下。

    www.68399.com,假定是多条记下的拍卖,比如删除记录

    至于怎么样引用控件什么的就隐瞒了,网络百度时而说的都比作者好,上面直接上源码。

    1)整个JS属性配置

    www.68399.com 17

    借使急需安装展现列展现,如下分界面所示

    总结

    www.68399.com 18

    到那,源码就修改完了。

    <table id="table"></table>
    
    function toPage() {
      var pageNum = $("#pageNum").val();
      if (pageNum) {
        $('#table').bootstrapTable('selectPage', parseInt(pageNum));
      }
    }
    

    剧本文件引进

    3、在js文件里增添跳转情势

    www.68399.com 19

    上述所述是笔者给我们介绍的bootstrap-table.js扩充分页工具栏(增添跳转到xx页)成效,希望对我们有着协助,假设大家有任何疑问请给本人留言,我会及时复苏大家的。在此也特别多谢大家对台本之家网址的支撑!

     //得到查询的参数
        queryParams : function (params) {
         //这里的键的名字和控制器的变量名必须一直,这边改动,控制器也需要改成一样的
         var temp = { 
          rows: params.limit,       //页面大小
          page: (params.offset / params.limit)   1, //页码
          sort: params.sort,  //排序列名 
          sortOrder: params.order //排位命令(desc,asc) 
         };
         return temp;
        },
    

    1、下载bootstrap-table.js的源码(注意不要下载min的,我下载的本子是:version: 1.11.0),在源码中以 '<ul class="pagination' 为关键字展开搜寻,定位到以下代码      

     //操作栏的格式化
      function actionFormatter(value, row, index) {
       var id = value;
       var result = "";
       result  = "<a href='javascript:;' class='btn btn-xs green' onclick="EditViewById('"   id   "', view='view')" title='查看'></a>";
       result  = "<a href='javascript:;' class='btn btn-xs blue' onclick="EditViewById('"   id   "')" title='编辑'></a>";
       result  = "<a href='javascript:;' class='btn btn-xs red' onclick="DeleteByIds('"   id   "')" title='删除'></a>";
       return result;
      }
    

    注:由于自家js水平停留在dom级,本次扩大只帮忙页面上的单表格,也便是说如若同三个页面援引五次bootstrap-table的话,该跳转将船到江心补漏迟。

    借使大家须要设置行的例外的体制呈现,能够通过增添rowStyle的JS管理函数就能够,如下代码所示

    2)查询及分页

    获得分页的参数音讯如下所示      

     /// <summary>
      /// 获取排序的信息
      /// </summary>
      /// <returns></returns>
      protected SortInfo GetSortOrder()
      {
       var name = Request["sort"];
       var order = Request["sortOrder"];
       return new SortInfo(name, order);
      }
    

    别的,大家看来行记录的最后扩大了几个操作开关,方便对前段时间记录的查阅、编辑和删除操作,如下效果图所示。

    本文由68399皇家赌场发布于服务器租用,转载请注明出处:应用bootstraptable插件实现表格记录的查询、分页、

    关键词: 68399皇家赌场