Pagination introduction of bootstrap table plug-in

This article mainly introduces the paging and checkbox usage of the table plug-in in detail. It has certain reference value. Interested friends can refer to itToday It is necessary to implement such a function. There is a checkbox list to choose from. You need to select the rows between pages and save them.

The final function is as shown in the figure: (picture from the Internet)

##Specific implementation

First, let’s look at the specific code. Here we only intercept the code required to implement the function

  var selectionIds =[],selectionNames=[];
  var curd = {
    init:function(){
      this._getCheckParam();
    },

    /**
     * 初始化
     * @private
     */

  /**
   * 表格操作
   */
  //表格分页之前处理多选框数据
  _responseHandler:function()(res) {
    $.each(res.rows, function (i, row) {
      row.checkStatus = $.inArray(row.id, selectionIds) != -1; //判断当前行的数据id是否存在与选中的数组，存在则将多选框状态变为true
    });
    return res;
  },
    _list:function(){
      var _this = this
      var settings = {
        url:Path.searchUrl,
        method:'GET',
        responseHandler:_this.responseHandler, //在渲染页面数据     之前执行的方法
        height:Path.tbheight
      };
      bsTable.initTable("#boostrapTable",settings);
      // 其它的boostrapTable参数已经封装在bsTable里面了，这里就不贴出来了
    },
    /**
     * 获取选中ID
     * @returns {*}
     * @private
     */
    _getIdSelections:function() {
        // 用map进行过滤
        return $.map($('#bootstrapTable').bootstrapTable('getSelections'), function (row) {
          return row.id
        });
      },
    /**
     * 获取选中对象并显示
     * @private
     */
    _getCheckParam:function(){
      var union = function(array,ids){
        $.each(ids, function (i, id) {
          if($.inArray(id,array)==-1){
            array[array.length] = id;
          }
        });
        return array;
      };
      //取消选中事件操作数组
      var difference = function(array,ids){
        $.each(ids, function (i, id) {
          var index = $.inArray(id,array);
          if(index!=-1){
            array.splice(index, 1);
          }
        });
        return array;
      };
      var _ = {"union":union,"difference":difference};
      var $table=$('#bootstrapTable');
      //绑定选中事件、取消事件、全部选中、全部取消
      $table.on('check.bs.table check-all.bs.table uncheck.bs.table uncheck-all.bs.table', function (e, rows) {
        var ids = $.map(!$.isArray(rows) ? [rows] : rows, function (row) {
          return row.id;
        });
        var names = $.map(!$.isArray(rows) ? [rows] : rows, function (row) {
          return row.name;
        });
        func = $.inArray(e.type, ['check', 'check-all']) > -1 ? 'union' : 'difference';
        selectionIds = _[func](selectionIds, ids);
        selectionNames =_[func](selectionNames,names);
      });
    }
  };
      return curd;

});

Comparison

Commonly used techniques

When using boostrapTable, select the rows of the table, and there are many rows returned. At this time, we need to filter out the fields we need. We can use

 function getIdSelections() {
    return $.map($table.bootstrapTable('getSelections'), function (row) {
      return row.id
      // 想返回什么字段就换成什么
    });
  }

Of course , if you need to limit the filtering of the selected data, it is also good to use filter to filter

var arr = [1,2,3,4,5,4,3,2,1];
var filterResult = arr.filter(function(item,index,array){
  return (item>2);
});
console.log(filterResult);  
//[3,4,5,4,3],返回所有数值都大于2的一个数组

The above is the detailed content of Pagination introduction of bootstrap table plug-in. For more information, please follow other related articles on the PHP Chinese website!