How to implement table support height percentage in bootstrap

This article introduces you to the example code of bootstrap table that supports height percentage. By changing the BootstrapTable.prototype.resetView method, it supports height percentage definition and adapts to screens of different heights. Friends who are interested can learn together

ChangeBootstrapTable.prototype.resetView method to support height percentage definition and adapt to screens of different heights

BootstrapTable.prototype.resetView = function (params) {
    var padding = 0;
    if (params && params.height) {
      this.options.height = params.height;
    }
    this.$selectAll.prop('checked', this.$selectItem.length > 0 &&
      this.$selectItem.length === this.$selectItem.filter(':checked').length);
    if (this.options.height) {
      var toolbarHeight = this.$toolbar.outerHeight(true),
        paginationHeight = this.$pagination.outerHeight(true),
        height = this.options.height;
　　　　　　　//关键代码
      if (this.options.height.toString().indexOf("%") != -1) {
        height = $(window).height() * (parseFloat(this.options.height) / 100);
      }
      height = height - toolbarHeight - paginationHeight;
      this.$tableContainer.css('height', height + 'px');
    }
    if (this.options.cardView) {
      // remove the element css
      this.$el.css('margin-top', '0');
      this.$tableContainer.css('padding-bottom', '0');
      this.$tableFooter.hide();
      return;
    }
    if (this.options.showHeader && this.options.height) {
      this.$tableHeader.show();
      this.resetHeader();
      padding += this.$header.outerHeight();
    } else {
      this.$tableHeader.hide();
      this.trigger('post-header');
    }
    if (this.options.showFooter) {
      this.resetFooter();
      if (this.options.height) {
        padding += this.$tableFooter.outerHeight() + 1;
      }
    }
    // Assign the correct sortable arrow
    this.getCaret();
    this.$tableContainer.css('padding-bottom', padding + 'px');
    this.trigger('reset-view');
  };

Changed bootstrap- The complete code of table.js:

/**
 * @author zhixin wen <wenzhixin2010@gmail.com>
 * version: 1.11.1
 * https://github.com/wenzhixin/bootstrap-table/
 */
(function ($) {
  &#39;use strict&#39;;
  // TOOLS DEFINITION
  // ======================
  var cachedWidth = null;
  // it only does &#39;%s&#39;, and return &#39;&#39; when arguments are undefined
  var sprintf = function (str) {
    var args = arguments,
      flag = true,
      i = 1;
    str = str.replace(/%s/g, function () {
      var arg = args[i++];
      if (typeof arg === &#39;undefined&#39;) {
        flag = false;
        return &#39;&#39;;
      }
      return arg;
    });
    return flag ? str : &#39;&#39;;
  };
  var getPropertyFromOther = function (list, from, to, value) {
    var result = &#39;&#39;;
    $.each(list, function (i, item) {
      if (item[from] === value) {
        result = item[to];
        return false;
      }
      return true;
    });
    return result;
  };
  var getFieldIndex = function (columns, field) {
    var index = -1;
    $.each(columns, function (i, column) {
      if (column.field === field) {
        index = i;
        return false;
      }
      return true;
    });
    return index;
  };
  // http://jsfiddle.net/wenyi/47nz7ez9/3/
  var setFieldIndex = function (columns) {
    var i, j, k,
      totalCol = 0,
      flag = [];
    for (i = 0; i < columns[0].length; i++) {
      totalCol += columns[0][i].colspan || 1;
    }
    for (i = 0; i < columns.length; i++) {
      flag[i] = [];
      for (j = 0; j < totalCol; j++) {
        flag[i][j] = false;
      }
    }
    for (i = 0; i < columns.length; i++) {
      for (j = 0; j < columns[i].length; j++) {
        var r = columns[i][j],
          rowspan = r.rowspan || 1,
          colspan = r.colspan || 1,
          index = $.inArray(false, flag[i]);
        if (colspan === 1) {
          r.fieldIndex = index;
          // when field is undefined, use index instead
          if (typeof r.field === &#39;undefined&#39;) {
            r.field = index;
          }
        }
        for (k = 0; k < rowspan; k++) {
          flag[i + k][index] = true;
        }
        for (k = 0; k < colspan; k++) {
          flag[i][index + k] = true;
        }
      }
    }
  };
  var getScrollBarWidth = function () {
    if (cachedWidth === null) {
      var inner = $(&#39;<p/>&#39;).addClass(&#39;fixed-table-scroll-inner&#39;),
        outer = $(&#39;<p/>&#39;).addClass(&#39;fixed-table-scroll-outer&#39;),
        w1, w2;
      outer.append(inner);
      $(&#39;body&#39;).append(outer);
      w1 = inner[0].offsetWidth;
      outer.css(&#39;overflow&#39;, &#39;scroll&#39;);
      w2 = inner[0].offsetWidth;
      if (w1 === w2) {
        w2 = outer[0].clientWidth;
      }
      outer.remove();
      cachedWidth = w1 - w2;
    }
    return cachedWidth;
  };
  var calculateObjectValue = function (self, name, args, defaultValue) {
    var func = name;
    if (typeof name === &#39;string&#39;) {
      // support obj.func1.func2
      var names = name.split(&#39;.&#39;);
      if (names.length > 1) {
        func = window;
        $.each(names, function (i, f) {
          func = func[f];
        });
      } else {
        func = window[name];
      }
    }
    if (typeof func === &#39;object&#39;) {
      return func;
    }
    if (typeof func === &#39;function&#39;) {
      return func.apply(self, args || []);
    }
    if (!func && typeof name === &#39;string&#39; && sprintf.apply(this, [name].concat(args))) {
      return sprintf.apply(this, [name].concat(args));
    }
    return defaultValue;
  };
  var compareObjects = function (objectA, objectB, compareLength) {
    // Create arrays of property names
    var objectAProperties = Object.getOwnPropertyNames(objectA),
      objectBProperties = Object.getOwnPropertyNames(objectB),
      propName = &#39;&#39;;
    if (compareLength) {
      // If number of properties is different, objects are not equivalent
      if (objectAProperties.length !== objectBProperties.length) {
        return false;
      }
    }
    for (var i = 0; i < objectAProperties.length; i++) {
      propName = objectAProperties[i];
      // If the property is not in the object B properties, continue with the next property
      if ($.inArray(propName, objectBProperties) > -1) {
        // If values of same property are not equal, objects are not equivalent
        if (objectA[propName] !== objectB[propName]) {
          return false;
        }
      }
    }
    // If we made it this far, objects are considered equivalent
    return true;
  };
  var escapeHTML = function (text) {
    if (typeof text === &#39;string&#39;) {
      return text
        .replace(/&/g, &#39;&&#39;)
        .replace(/</g, &#39;<&#39;)
        .replace(/>/g, &#39;>&#39;)
        .replace(/"/g, &#39;"&#39;)
        .replace(/&#39;/g, &#39;&#39;&#39;)
        .replace(/`/g, &#39;`&#39;);
    }
    return text;
  };
  var getRealDataAttr = function (dataAttr) {
    for (var attr in dataAttr) {
      var auxAttr = attr.split(/(?=[A-Z])/).join(&#39;-&#39;).toLowerCase();
      if (auxAttr !== attr) {
        dataAttr[auxAttr] = dataAttr[attr];
        delete dataAttr[attr];
      }
    }
    return dataAttr;
  };
  var getItemField = function (item, field, escape) {
    var value = item;
    if (typeof field !== &#39;string&#39; || item.hasOwnProperty(field)) {
      return escape ? escapeHTML(item[field]) : item[field];
    }
    var props = field.split(&#39;.&#39;);
    for (var p in props) {
      if (props.hasOwnProperty(p)) {
        value = value && value[props[p]];
      }
    }
    return escape ? escapeHTML(value) : value;
  };
  var isIEBrowser = function () {
    return !!(navigator.userAgent.indexOf("MSIE ") > 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./));
  };
  var objectKeys = function () {
    // From https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys
    if (!Object.keys) {
      Object.keys = (function () {
        var hasOwnProperty = Object.prototype.hasOwnProperty,
          hasDontEnumBug = !({ toString: null }).propertyIsEnumerable(&#39;toString&#39;),
          dontEnums = [
            &#39;toString&#39;,
            &#39;toLocaleString&#39;,
            &#39;valueOf&#39;,
            &#39;hasOwnProperty&#39;,
            &#39;isPrototypeOf&#39;,
            &#39;propertyIsEnumerable&#39;,
            &#39;constructor&#39;
          ],
          dontEnumsLength = dontEnums.length;
        return function (obj) {
          if (typeof obj !== &#39;object&#39; && (typeof obj !== &#39;function&#39; || obj === null)) {
            throw new TypeError(&#39;Object.keys called on non-object&#39;);
          }
          var result = [], prop, i;
          for (prop in obj) {
            if (hasOwnProperty.call(obj, prop)) {
              result.push(prop);
            }
          }
          if (hasDontEnumBug) {
            for (i = 0; i < dontEnumsLength; i++) {
              if (hasOwnProperty.call(obj, dontEnums[i])) {
                result.push(dontEnums[i]);
              }
            }
          }
          return result;
        };
      }());
    }
  };
  // BOOTSTRAP TABLE CLASS DEFINITION
  // ======================
  var BootstrapTable = function (el, options) {
    this.options = options;
    this.$el = $(el);
    this.$el_ = this.$el.clone();
    this.timeoutId_ = 0;
    this.timeoutFooter_ = 0;
    this.init();
  };
  BootstrapTable.DEFAULTS = {
    classes: &#39;table table-hover&#39;,
    sortClass: undefined,
    locale: undefined,
    height: undefined,
    undefinedText: &#39;-&#39;,
    sortName: undefined,
    sortOrder: &#39;asc&#39;,
    sortStable: false,
    striped: false,
    columns: [[]],
    data: [],
    totalField: &#39;total&#39;,
    dataField: &#39;rows&#39;,
    method: &#39;get&#39;,
    url: undefined,
    ajax: undefined,
    cache: true,
    contentType: &#39;application/json&#39;,
    dataType: &#39;json&#39;,
    ajaxOptions: {},
    queryParams: function (params) {
      return params;
    },
    queryParamsType: &#39;limit&#39;, // undefined
    responseHandler: function (res) {
      return res;
    },
    pagination: false,
    onlyInfoPagination: false,
    paginationLoop: true,
    sidePagination: &#39;client&#39;, // client or server
    totalRows: 0, // server side need to set
    pageNumber: 1,
    pageSize: 10,
    pageList: [10, 25, 50, 100],
    paginationHAlign: &#39;right&#39;, //right, left
    paginationVAlign: &#39;bottom&#39;, //bottom, top, both
    paginationDetailHAlign: &#39;left&#39;, //right, left
    paginationPreText: &#39;‹&#39;,
    paginationNextText: &#39;›&#39;,
    search: false,
    searchOnEnterKey: false,
    strictSearch: false,
    searchAlign: &#39;right&#39;,
    selectItemName: &#39;btSelectItem&#39;,
    showHeader: true,
    showFooter: false,
    showColumns: false,
    showPaginationSwitch: false,
    showRefresh: false,
    showToggle: false,
    buttonsAlign: &#39;right&#39;,
    smartDisplay: true,
    escape: false,
    minimumCountColumns: 1,
    idField: undefined,
    uniqueId: undefined,
    cardView: false,
    detailView: false,
    detailFormatter: function (index, row) {
      return &#39;&#39;;
    },
    trimOnSearch: true,
    clickToSelect: false,
    singleSelect: false,
    toolbar: undefined,
    toolbarAlign: &#39;left&#39;,
    checkboxHeader: true,
    sortable: true,
    silentSort: true,
    maintainSelected: false,
    searchTimeOut: 500,
    searchText: &#39;&#39;,
    iconSize: undefined,
    buttonsClass: &#39;default&#39;,
    iconsPrefix: &#39;glyphicon&#39;, // glyphicon of fa (font awesome)
    icons: {
      paginationSwitchDown: &#39;glyphicon-collapse-down icon-chevron-down&#39;,
      paginationSwitchUp: &#39;glyphicon-collapse-up icon-chevron-up&#39;,
      refresh: &#39;glyphicon-refresh icon-refresh&#39;,
      toggle: &#39;glyphicon-list-alt icon-list-alt&#39;,
      columns: &#39;glyphicon-th icon-th&#39;,
      detailOpen: &#39;glyphicon-plus icon-plus&#39;,
      detailClose: &#39;glyphicon-minus icon-minus&#39;
    },
    customSearch: $.noop,
    customSort: $.noop,
    rowStyle: function (row, index) {
      return {};
    },
    rowAttributes: function (row, index) {
      return {};
    },
    footerStyle: function (row, index) {
      return {};
    },
    onAll: function (name, args) {
      return false;
    },
    onClickCell: function (field, value, row, $element) {
      return false;
    },
    onDblClickCell: function (field, value, row, $element) {
      return false;
    },
    onClickRow: function (item, $element) {
      return false;
    },
    onDblClickRow: function (item, $element) {
      return false;
    },
    onSort: function (name, order) {
      return false;
    },
    onCheck: function (row) {
      return false;
    },
    onUncheck: function (row) {
      return false;
    },
    onCheckAll: function (rows) {
      return false;
    },
    onUncheckAll: function (rows) {
      return false;
    },
    onCheckSome: function (rows) {
      return false;
    },
    onUncheckSome: function (rows) {
      return false;
    },
    onLoadSuccess: function (data) {
      return false;
    },
    onLoadError: function (status) {
      return false;
    },
    onColumnSwitch: function (field, checked) {
      return false;
    },
    onPageChange: function (number, size) {
      return false;
    },
    onSearch: function (text) {
      return false;
    },
    onToggle: function (cardView) {
      return false;
    },
    onPreBody: function (data) {
      return false;
    },
    onPostBody: function () {
      return false;
    },
    onPostHeader: function () {
      return false;
    },
    onExpandRow: function (index, row, $detail) {
      return false;
    },
    onCollapseRow: function (index, row) {
      return false;
    },
    onRefreshOptions: function (options) {
      return false;
    },
    onRefresh: function (params) {
      return false;
    },
    onResetView: function () {
      return false;
    }
  };
  BootstrapTable.LOCALES = {};
  BootstrapTable.LOCALES[&#39;en-US&#39;] = BootstrapTable.LOCALES.en = {
    formatLoadingMessage: function () {
      return &#39;Loading, please wait...&#39;;
    },
    formatRecordsPerPage: function (pageNumber) {
      return sprintf(&#39;%s rows per page&#39;, pageNumber);
    },
    formatShowingRows: function (pageFrom, pageTo, totalRows) {
      return sprintf(&#39;Showing %s to %s of %s rows&#39;, pageFrom, pageTo, totalRows);
    },
    formatDetailPagination: function (totalRows) {
      return sprintf(&#39;Showing %s rows&#39;, totalRows);
    },
    formatSearch: function () {
      return &#39;Search&#39;;
    },
    formatNoMatches: function () {
      return &#39;No matching records found&#39;;
    },
    formatPaginationSwitch: function () {
      return &#39;Hide/Show pagination&#39;;
    },
    formatRefresh: function () {
      return &#39;Refresh&#39;;
    },
    formatToggle: function () {
      return &#39;Toggle&#39;;
    },
    formatColumns: function () {
      return &#39;Columns&#39;;
    },
    formatAllRows: function () {
      return &#39;All&#39;;
    }
  };
  $.extend(BootstrapTable.DEFAULTS, BootstrapTable.LOCALES[&#39;en-US&#39;]);
  BootstrapTable.COLUMN_DEFAULTS = {
    radio: false,
    checkbox: false,
    checkboxEnabled: true,
    field: undefined,
    title: undefined,
    titleTooltip: undefined,
    &#39;class&#39;: undefined,
    align: undefined, // left, right, center
    halign: undefined, // left, right, center
    falign: undefined, // left, right, center
    valign: undefined, // top, middle, bottom
    width: undefined,
    sortable: false,
    order: &#39;asc&#39;, // asc, desc
    visible: true,
    switchable: true,
    clickToSelect: true,
    formatter: undefined,
    footerFormatter: undefined,
    events: undefined,
    sorter: undefined,
    sortName: undefined,
    cellStyle: undefined,
    searchable: true,
    searchFormatter: true,
    cardVisible: true,
    escape: false
  };
  BootstrapTable.EVENTS = {
    &#39;all.bs.table&#39;: &#39;onAll&#39;,
    &#39;click-cell.bs.table&#39;: &#39;onClickCell&#39;,
    &#39;dbl-click-cell.bs.table&#39;: &#39;onDblClickCell&#39;,
    &#39;click-row.bs.table&#39;: &#39;onClickRow&#39;,
    &#39;dbl-click-row.bs.table&#39;: &#39;onDblClickRow&#39;,
    &#39;sort.bs.table&#39;: &#39;onSort&#39;,
    &#39;check.bs.table&#39;: &#39;onCheck&#39;,
    &#39;uncheck.bs.table&#39;: &#39;onUncheck&#39;,
    &#39;check-all.bs.table&#39;: &#39;onCheckAll&#39;,
    &#39;uncheck-all.bs.table&#39;: &#39;onUncheckAll&#39;,
    &#39;check-some.bs.table&#39;: &#39;onCheckSome&#39;,
    &#39;uncheck-some.bs.table&#39;: &#39;onUncheckSome&#39;,
    &#39;load-success.bs.table&#39;: &#39;onLoadSuccess&#39;,
    &#39;load-error.bs.table&#39;: &#39;onLoadError&#39;,
    &#39;column-switch.bs.table&#39;: &#39;onColumnSwitch&#39;,
    &#39;page-change.bs.table&#39;: &#39;onPageChange&#39;,
    &#39;search.bs.table&#39;: &#39;onSearch&#39;,
    &#39;toggle.bs.table&#39;: &#39;onToggle&#39;,
    &#39;pre-body.bs.table&#39;: &#39;onPreBody&#39;,
    &#39;post-body.bs.table&#39;: &#39;onPostBody&#39;,
    &#39;post-header.bs.table&#39;: &#39;onPostHeader&#39;,
    &#39;expand-row.bs.table&#39;: &#39;onExpandRow&#39;,
    &#39;collapse-row.bs.table&#39;: &#39;onCollapseRow&#39;,
    &#39;refresh-options.bs.table&#39;: &#39;onRefreshOptions&#39;,
    &#39;reset-view.bs.table&#39;: &#39;onResetView&#39;,
    &#39;refresh.bs.table&#39;: &#39;onRefresh&#39;
  };
  BootstrapTable.prototype.init = function () {
    this.initLocale();
    this.initContainer();
    this.initTable();
    this.initHeader();
    this.initData();
    this.initHiddenRows();
    this.initFooter();
    this.initToolbar();
    this.initPagination();
    this.initBody();
    this.initSearchText();
    this.initServer();
  };
  BootstrapTable.prototype.initLocale = function () {
    if (this.options.locale) {
      var parts = this.options.locale.split(/-|_/);
      parts[0].toLowerCase();
      if (parts[1]) parts[1].toUpperCase();
      if ($.fn.bootstrapTable.locales[this.options.locale]) {
        // locale as requested
        $.extend(this.options, $.fn.bootstrapTable.locales[this.options.locale]);
      } else if ($.fn.bootstrapTable.locales[parts.join(&#39;-&#39;)]) {
        // locale with sep set to - (in case original was specified with _)
        $.extend(this.options, $.fn.bootstrapTable.locales[parts.join(&#39;-&#39;)]);
      } else if ($.fn.bootstrapTable.locales[parts[0]]) {
        // short locale language code (i.e. &#39;en&#39;)
        $.extend(this.options, $.fn.bootstrapTable.locales[parts[0]]);
      }
    }
  };
  BootstrapTable.prototype.initContainer = function () {
    this.$container = $([
      &#39;<p class="bootstrap-table">&#39;,
      &#39;<p class="fixed-table-toolbar"></p>&#39;,
      this.options.paginationVAlign === &#39;top&#39; || this.options.paginationVAlign === &#39;both&#39; ?
        &#39;<p class="fixed-table-pagination" style="clear: both;"></p>&#39; :
        &#39;&#39;,
      &#39;<p class="fixed-table-container">&#39;,
      &#39;<p class="fixed-table-header"><table></table></p>&#39;,
      &#39;<p class="fixed-table-body">&#39;,
      &#39;<p class="fixed-table-loading">&#39;,
      this.options.formatLoadingMessage(),
      &#39;</p>&#39;,
      &#39;</p>&#39;,
      &#39;<p class="fixed-table-footer"><table><tr></tr></table></p>&#39;,
      this.options.paginationVAlign === &#39;bottom&#39; || this.options.paginationVAlign === &#39;both&#39; ?
        &#39;<p class="fixed-table-pagination"></p>&#39; :
        &#39;&#39;,
      &#39;</p>&#39;,
      &#39;</p>&#39;
    ].join(&#39;&#39;));
    this.$container.insertAfter(this.$el);
    this.$tableContainer = this.$container.find(&#39;.fixed-table-container&#39;);
    this.$tableHeader = this.$container.find(&#39;.fixed-table-header&#39;);
    this.$tableBody = this.$container.find(&#39;.fixed-table-body&#39;);
    this.$tableLoading = this.$container.find(&#39;.fixed-table-loading&#39;);
    this.$tableFooter = this.$container.find(&#39;.fixed-table-footer&#39;);
    this.$toolbar = this.$container.find(&#39;.fixed-table-toolbar&#39;);
    this.$pagination = this.$container.find(&#39;.fixed-table-pagination&#39;);
    this.$tableBody.append(this.$el);
    this.$container.after(&#39;<p class="clearfix"></p>&#39;);
    this.$el.addClass(this.options.classes);
    if (this.options.striped) {
      this.$el.addClass(&#39;table-striped&#39;);
    }
    if ($.inArray(&#39;table-no-bordered&#39;, this.options.classes.split(&#39; &#39;)) !== -1) {
      this.$tableContainer.addClass(&#39;table-no-bordered&#39;);
    }
  };
  BootstrapTable.prototype.initTable = function () {
    var that = this,
      columns = [],
      data = [];
    this.$header = this.$el.find(&#39;>thead&#39;);
    if (!this.$header.length) {
      this.$header = $(&#39;<thead></thead>&#39;).appendTo(this.$el);
    }
    this.$header.find(&#39;tr&#39;).each(function () {
      var column = [];
      $(this).find(&#39;th&#39;).each(function () {
        // Fix #2014 - getFieldIndex and elsewhere assume this is string, causes issues if not
        if (typeof $(this).data(&#39;field&#39;) !== &#39;undefined&#39;) {
          $(this).data(&#39;field&#39;, $(this).data(&#39;field&#39;) + &#39;&#39;);
        }
        column.push($.extend({}, {
          title: $(this).html(),
          &#39;class&#39;: $(this).attr(&#39;class&#39;),
          titleTooltip: $(this).attr(&#39;title&#39;),
          rowspan: $(this).attr(&#39;rowspan&#39;) ? +$(this).attr(&#39;rowspan&#39;) : undefined,
          colspan: $(this).attr(&#39;colspan&#39;) ? +$(this).attr(&#39;colspan&#39;) : undefined
        }, $(this).data()));
      });
      columns.push(column);
    });
    if (!$.isArray(this.options.columns[0])) {
      this.options.columns = [this.options.columns];
    }
    this.options.columns = $.extend(true, [], columns, this.options.columns);
    this.columns = [];
    setFieldIndex(this.options.columns);
    $.each(this.options.columns, function (i, columns) {
      $.each(columns, function (j, column) {
        column = $.extend({}, BootstrapTable.COLUMN_DEFAULTS, column);
        if (typeof column.fieldIndex !== &#39;undefined&#39;) {
          that.columns[column.fieldIndex] = column;
        }
        that.options.columns[i][j] = column;
      });
    });
    // if options.data is setting, do not process tbody data
    if (this.options.data.length) {
      return;
    }
    var m = [];
    this.$el.find(&#39;>tbody>tr&#39;).each(function (y) {
      var row = {};
      // save tr&#39;s id, class and data-* attributes
      row._id = $(this).attr(&#39;id&#39;);
      row._class = $(this).attr(&#39;class&#39;);
      row._data = getRealDataAttr($(this).data());
      $(this).find(&#39;>td&#39;).each(function (x) {
        var $this = $(this),
          cspan = +$this.attr(&#39;colspan&#39;) || 1,
          rspan = +$this.attr(&#39;rowspan&#39;) || 1,
          tx, ty;
        for (; m[y] && m[y][x]; x++); //skip already occupied cells in current row
        for (tx = x; tx < x + cspan; tx++) { //mark matrix elements occupied by current cell with true
          for (ty = y; ty < y + rspan; ty++) {
            if (!m[ty]) { //fill missing rows
              m[ty] = [];
            }
            m[ty][tx] = true;
          }
        }
        var field = that.columns[x].field;
        row[field] = $(this).html();
        // save td&#39;s id, class and data-* attributes
        row[&#39;_&#39; + field + &#39;_id&#39;] = $(this).attr(&#39;id&#39;);
        row[&#39;_&#39; + field + &#39;_class&#39;] = $(this).attr(&#39;class&#39;);
        row[&#39;_&#39; + field + &#39;_rowspan&#39;] = $(this).attr(&#39;rowspan&#39;);
        row[&#39;_&#39; + field + &#39;_colspan&#39;] = $(this).attr(&#39;colspan&#39;);
        row[&#39;_&#39; + field + &#39;_title&#39;] = $(this).attr(&#39;title&#39;);
        row[&#39;_&#39; + field + &#39;_data&#39;] = getRealDataAttr($(this).data());
      });
      data.push(row);
    });
    this.options.data = data;
    if (data.length) this.fromHtml = true;
  };
  BootstrapTable.prototype.initHeader = function () {
    var that = this,
      visibleColumns = {},
      html = [];
    this.header = {
      fields: [],
      styles: [],
      classes: [],
      formatters: [],
      events: [],
      sorters: [],
      sortNames: [],
      cellStyles: [],
      searchables: []
    };
    $.each(this.options.columns, function (i, columns) {
      html.push(&#39;<tr>&#39;);
      if (i === 0 && !that.options.cardView && that.options.detailView) {
        html.push(sprintf(&#39;<th class="detail" rowspan="%s"><p class="fht-cell"></p></th>&#39;,
          that.options.columns.length));
      }
      $.each(columns, function (j, column) {
        var text = &#39;&#39;,
          halign = &#39;&#39;, // header align style
          align = &#39;&#39;, // body align style
          style = &#39;&#39;,
          class_ = sprintf(&#39; class="%s"&#39;, column[&#39;class&#39;]),
          order = that.options.sortOrder || column.order,
          unitWidth = &#39;px&#39;,
          width = column.width;
        if (column.width !== undefined && (!that.options.cardView)) {
          if (typeof column.width === &#39;string&#39;) {
            if (column.width.indexOf(&#39;%&#39;) !== -1) {
              unitWidth = &#39;%&#39;;
            }
          }
        }
        if (column.width && typeof column.width === &#39;string&#39;) {
          width = column.width.replace(&#39;%&#39;, &#39;&#39;).replace(&#39;px&#39;, &#39;&#39;);
        }
        halign = sprintf(&#39;text-align: %s; &#39;, column.halign ? column.halign : column.align);
        align = sprintf(&#39;text-align: %s; &#39;, column.align);
        style = sprintf(&#39;vertical-align: %s; &#39;, column.valign);
        style += sprintf(&#39;width: %s; &#39;, (column.checkbox || column.radio) && !width ?
          &#39;36px&#39; : (width ? width + unitWidth : undefined));
        if (typeof column.fieldIndex !== &#39;undefined&#39;) {
          that.header.fields[column.fieldIndex] = column.field;
          that.header.styles[column.fieldIndex] = align + style;
          that.header.classes[column.fieldIndex] = class_;
          that.header.formatters[column.fieldIndex] = column.formatter;
          that.header.events[column.fieldIndex] = column.events;
          that.header.sorters[column.fieldIndex] = column.sorter;
          that.header.sortNames[column.fieldIndex] = column.sortName;
          that.header.cellStyles[column.fieldIndex] = column.cellStyle;
          that.header.searchables[column.fieldIndex] = column.searchable;
          if (!column.visible) {
            return;
          }
          if (that.options.cardView && (!column.cardVisible)) {
            return;
          }
          visibleColumns[column.field] = column;
        }
        html.push(&#39;<th&#39; + sprintf(&#39; title="%s"&#39;, column.titleTooltip),
          column.checkbox || column.radio ?
            sprintf(&#39; class="bs-checkbox %s"&#39;, column[&#39;class&#39;] || &#39;&#39;) :
            class_,
          sprintf(&#39; style="%s"&#39;, halign + style),
          sprintf(&#39; rowspan="%s"&#39;, column.rowspan),
          sprintf(&#39; colspan="%s"&#39;, column.colspan),
          sprintf(&#39; data-field="%s"&#39;, column.field),
          &#39;>&#39;);
        html.push(sprintf(&#39;<p class="th-inner %s">&#39;, that.options.sortable && column.sortable ?
          &#39;sortable both&#39; : &#39;&#39;));
        text = that.options.escape ? escapeHTML(column.title) : column.title;
        if (column.checkbox) {
          if (!that.options.singleSelect && that.options.checkboxHeader) {
            text = &#39;<input name="btSelectAll" type="checkbox" />&#39;;
          }
          that.header.stateField = column.field;
        }
        if (column.radio) {
          text = &#39;&#39;;
          that.header.stateField = column.field;
          that.options.singleSelect = true;
        }
        html.push(text);
        html.push(&#39;</p>&#39;);
        html.push(&#39;<p class="fht-cell"></p>&#39;);
        html.push(&#39;</p>&#39;);
        html.push(&#39;</th>&#39;);
      });
      html.push(&#39;</tr>&#39;);
    });
    this.$header.html(html.join(&#39;&#39;));
    this.$header.find(&#39;th[data-field]&#39;).each(function (i) {
      $(this).data(visibleColumns[$(this).data(&#39;field&#39;)]);
    });
    this.$container.off(&#39;click&#39;, &#39;.th-inner&#39;).on(&#39;click&#39;, &#39;.th-inner&#39;, function (event) {
      var target = $(this);
      if (that.options.detailView) {
        if (target.closest(&#39;.bootstrap-table&#39;)[0] !== that.$container[0])
          return false;
      }
      if (that.options.sortable && target.parent().data().sortable) {
        that.onSort(event);
      }
    });
    this.$header.children().children().off(&#39;keypress&#39;).on(&#39;keypress&#39;, function (event) {
      if (that.options.sortable && $(this).data().sortable) {
        var code = event.keyCode || event.which;
        if (code == 13) { //Enter keycode
          that.onSort(event);
        }
      }
    });
    $(window).off(&#39;resize.bootstrap-table&#39;);
    if (!this.options.showHeader || this.options.cardView) {
      this.$header.hide();
      this.$tableHeader.hide();
      this.$tableLoading.css(&#39;top&#39;, 0);
    } else {
      this.$header.show();
      this.$tableHeader.show();
      this.$tableLoading.css(&#39;top&#39;, this.$header.outerHeight() + 1);
      // Assign the correct sortable arrow
      this.getCaret();
      $(window).on(&#39;resize.bootstrap-table&#39;, $.proxy(this.resetWidth, this));
    }
    this.$selectAll = this.$header.find(&#39;[name="btSelectAll"]&#39;);
    this.$selectAll.off(&#39;click&#39;).on(&#39;click&#39;, function () {
      var checked = $(this).prop(&#39;checked&#39;);
      that[checked ? &#39;checkAll&#39; : &#39;uncheckAll&#39;]();
      that.updateSelected();
    });
  };
  BootstrapTable.prototype.initFooter = function () {
    if (!this.options.showFooter || this.options.cardView) {
      this.$tableFooter.hide();
    } else {
      this.$tableFooter.show();
    }
  };
  /**
   * @param data
   * @param type: append / prepend
   */
  BootstrapTable.prototype.initData = function (data, type) {
    if (type === &#39;append&#39;) {
      this.data = this.data.concat(data);
    } else if (type === &#39;prepend&#39;) {
      this.data = [].concat(data).concat(this.data);
    } else {
      this.data = data || this.options.data;
    }
    // Fix #839 Records deleted when adding new row on filtered table
    if (type === &#39;append&#39;) {
      this.options.data = this.options.data.concat(data);
    } else if (type === &#39;prepend&#39;) {
      this.options.data = [].concat(data).concat(this.options.data);
    } else {
      this.options.data = this.data;
    }
    if (this.options.sidePagination === &#39;server&#39;) {
      return;
    }
    this.initSort();
  };
  BootstrapTable.prototype.initSort = function () {
    var that = this,
      name = this.options.sortName,
      order = this.options.sortOrder === &#39;desc&#39; ? -1 : 1,
      index = $.inArray(this.options.sortName, this.header.fields),
      timeoutId = 0;
    if (this.options.customSort !== $.noop) {
      this.options.customSort.apply(this, [this.options.sortName, this.options.sortOrder]);
      return;
    }
    if (index !== -1) {
      if (this.options.sortStable) {
        $.each(this.data, function (i, row) {
          if (!row.hasOwnProperty(&#39;_position&#39;)) row._position = i;
        });
      }
      this.data.sort(function (a, b) {
        if (that.header.sortNames[index]) {
          name = that.header.sortNames[index];
        }
        var aa = getItemField(a, name, that.options.escape),
          bb = getItemField(b, name, that.options.escape),
          value = calculateObjectValue(that.header, that.header.sorters[index], [aa, bb]);
        if (value !== undefined) {
          return order * value;
        }
        // Fix #161: undefined or null string sort bug.
        if (aa === undefined || aa === null) {
          aa = &#39;&#39;;
        }
        if (bb === undefined || bb === null) {
          bb = &#39;&#39;;
        }
        if (that.options.sortStable && aa === bb) {
          aa = a._position;
          bb = b._position;
        }
        // IF both values are numeric, do a numeric comparison
        if ($.isNumeric(aa) && $.isNumeric(bb)) {
          // Convert numerical values form string to float.
          aa = parseFloat(aa);
          bb = parseFloat(bb);
          if (aa < bb) {
            return order * -1;
          }
          return order;
        }
        if (aa === bb) {
          return 0;
        }
        // If value is not a string, convert to string
        if (typeof aa !== &#39;string&#39;) {
          aa = aa.toString();
        }
        if (aa.localeCompare(bb) === -1) {
          return order * -1;
        }
        return order;
      });
      if (this.options.sortClass !== undefined) {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(function () {
          that.$el.removeClass(that.options.sortClass);
          var index = that.$header.find(sprintf(&#39;[data-field="%s"]&#39;,
            that.options.sortName).index() + 1);
          that.$el.find(sprintf(&#39;tr td:nth-child(%s)&#39;, index))
            .addClass(that.options.sortClass);
        }, 250);
      }
    }
  };
  BootstrapTable.prototype.onSort = function (event) {
    var $this = event.type === "keypress" ? $(event.currentTarget) : $(event.currentTarget).parent(),
      $this_ = this.$header.find(&#39;th&#39;).eq($this.index());
    this.$header.add(this.$header_).find(&#39;span.order&#39;).remove();
    if (this.options.sortName === $this.data(&#39;field&#39;)) {
      this.options.sortOrder = this.options.sortOrder === &#39;asc&#39; ? &#39;desc&#39; : &#39;asc&#39;;
    } else {
      this.options.sortName = $this.data(&#39;field&#39;);
      this.options.sortOrder = $this.data(&#39;order&#39;) === &#39;asc&#39; ? &#39;desc&#39; : &#39;asc&#39;;
    }
    this.trigger(&#39;sort&#39;, this.options.sortName, this.options.sortOrder);
    $this.add($this_).data(&#39;order&#39;, this.options.sortOrder);
    // Assign the correct sortable arrow
    this.getCaret();
    if (this.options.sidePagination === &#39;server&#39;) {
      this.initServer(this.options.silentSort);
      return;
    }
    this.initSort();
    this.initBody();
  };
  BootstrapTable.prototype.initToolbar = function () {
    var that = this,
      html = [],
      timeoutId = 0,
      $keepOpen,
      $search,
      switchableCount = 0;
    if (this.$toolbar.find(&#39;.bs-bars&#39;).children().length) {
      $(&#39;body&#39;).append($(this.options.toolbar));
    }
    this.$toolbar.html(&#39;&#39;);
    if (typeof this.options.toolbar === &#39;string&#39; || typeof this.options.toolbar === &#39;object&#39;) {
      $(sprintf(&#39;<p class="bs-bars pull-%s"></p>&#39;, this.options.toolbarAlign))
        .appendTo(this.$toolbar)
        .append($(this.options.toolbar));
    }
    // showColumns, showToggle, showRefresh
    html = [sprintf(&#39;<p class="columns columns-%s btn-group pull-%s">&#39;,
      this.options.buttonsAlign, this.options.buttonsAlign)];
    if (typeof this.options.icons === &#39;string&#39;) {
      this.options.icons = calculateObjectValue(null, this.options.icons);
    }
    if (this.options.showPaginationSwitch) {
      html.push(sprintf(&#39;<button class="btn&#39; +
        sprintf(&#39; btn-%s&#39;, this.options.buttonsClass) +
        sprintf(&#39; btn-%s&#39;, this.options.iconSize) +
        &#39;" type="button" name="paginationSwitch" aria-label="pagination Switch" title="%s">&#39;,
        this.options.formatPaginationSwitch()),
        sprintf(&#39;<i class="%s %s"></i>&#39;, this.options.iconsPrefix, this.options.icons.paginationSwitchDown),
        &#39;</button>&#39;);
    }
    if (this.options.showRefresh) {
      html.push(sprintf(&#39;<button class="btn&#39; +
        sprintf(&#39; btn-%s&#39;, this.options.buttonsClass) +
        sprintf(&#39; btn-%s&#39;, this.options.iconSize) +
        &#39;" type="button" name="refresh" aria-label="refresh" title="%s">&#39;,
        this.options.formatRefresh()),
        sprintf(&#39;<i class="%s %s"></i>&#39;, this.options.iconsPrefix, this.options.icons.refresh),
        &#39;</button>&#39;);
    }
    if (this.options.showToggle) {
      html.push(sprintf(&#39;<button class="btn&#39; +
        sprintf(&#39; btn-%s&#39;, this.options.buttonsClass) +
        sprintf(&#39; btn-%s&#39;, this.options.iconSize) +
        &#39;" type="button" name="toggle" aria-label="toggle" title="%s">&#39;,
        this.options.formatToggle()),
        sprintf(&#39;<i class="%s %s"></i>&#39;, this.options.iconsPrefix, this.options.icons.toggle),
        &#39;</button>&#39;);
    }
    if (this.options.showColumns) {
      html.push(sprintf(&#39;<p class="keep-open btn-group" title="%s">&#39;,
        this.options.formatColumns()),
        &#39;<button type="button" aria-label="columns" class="btn&#39; +
        sprintf(&#39; btn-%s&#39;, this.options.buttonsClass) +
        sprintf(&#39; btn-%s&#39;, this.options.iconSize) +
        &#39; dropdown-toggle" data-toggle="dropdown">&#39;,
        sprintf(&#39;<i class="%s %s"></i>&#39;, this.options.iconsPrefix, this.options.icons.columns),
        &#39; <span class="caret"></span>&#39;,
        &#39;</button>&#39;,
        &#39;<ul class="dropdown-menu" role="menu">&#39;);
      $.each(this.columns, function (i, column) {
        if (column.radio || column.checkbox) {
          return;
        }
        if (that.options.cardView && !column.cardVisible) {
          return;
        }
        var checked = column.visible ? &#39; checked="checked"&#39; : &#39;&#39;;
        if (column.switchable) {
          html.push(sprintf(&#39;<li role="menuitem">&#39; +
            &#39;<label><input type="checkbox" data-field="%s" value="%s"%s> %s</label>&#39; +
            &#39;</li>&#39;, column.field, i, checked, column.title));
          switchableCount++;
        }
      });
      html.push(&#39;</ul>&#39;,
        &#39;</p>&#39;);
    }
    html.push(&#39;</p>&#39;);
    // Fix #188: this.showToolbar is for extensions
    if (this.showToolbar || html.length > 2) {
      this.$toolbar.append(html.join(&#39;&#39;));
    }
    if (this.options.showPaginationSwitch) {
      this.$toolbar.find(&#39;button[name="paginationSwitch"]&#39;)
        .off(&#39;click&#39;).on(&#39;click&#39;, $.proxy(this.togglePagination, this));
    }
    if (this.options.showRefresh) {
      this.$toolbar.find(&#39;button[name="refresh"]&#39;)
        .off(&#39;click&#39;).on(&#39;click&#39;, $.proxy(this.refresh, this));
    }
    if (this.options.showToggle) {
      this.$toolbar.find(&#39;button[name="toggle"]&#39;)
        .off(&#39;click&#39;).on(&#39;click&#39;, function () {
          that.toggleView();
        });
    }
    if (this.options.showColumns) {
      $keepOpen = this.$toolbar.find(&#39;.keep-open&#39;);
      if (switchableCount <= this.options.minimumCountColumns) {
        $keepOpen.find(&#39;input&#39;).prop(&#39;disabled&#39;, true);
      }
      $keepOpen.find(&#39;li&#39;).off(&#39;click&#39;).on(&#39;click&#39;, function (event) {
        event.stopImmediatePropagation();
      });
      $keepOpen.find(&#39;input&#39;).off(&#39;click&#39;).on(&#39;click&#39;, function () {
        var $this = $(this);
        that.toggleColumn($(this).val(), $this.prop(&#39;checked&#39;), false);
        that.trigger(&#39;column-switch&#39;, $(this).data(&#39;field&#39;), $this.prop(&#39;checked&#39;));
      });
    }
    if (this.options.search) {
      html = [];
      html.push(
        &#39;<p class="pull-&#39; + this.options.searchAlign + &#39; search">&#39;,
        sprintf(&#39;<input class="form-control&#39; +
          sprintf(&#39; input-%s&#39;, this.options.iconSize) +
          &#39;" type="text" placeholder="%s">&#39;,
          this.options.formatSearch()),
        &#39;</p>&#39;);
      this.$toolbar.append(html.join(&#39;&#39;));
      $search = this.$toolbar.find(&#39;.search input&#39;);
      $search.off(&#39;keyup drop blur&#39;).on(&#39;keyup drop blur&#39;, function (event) {
        if (that.options.searchOnEnterKey && event.keyCode !== 13) {
          return;
        }
        if ($.inArray(event.keyCode, [37, 38, 39, 40]) > -1) {
          return;
        }
        clearTimeout(timeoutId); // doesn&#39;t matter if it&#39;s 0
        timeoutId = setTimeout(function () {
          that.onSearch(event);
        }, that.options.searchTimeOut);
      });
      if (isIEBrowser()) {
        $search.off(&#39;mouseup&#39;).on(&#39;mouseup&#39;, function (event) {
          clearTimeout(timeoutId); // doesn&#39;t matter if it&#39;s 0
          timeoutId = setTimeout(function () {
            that.onSearch(event);
          }, that.options.searchTimeOut);
        });
      }
    }
  };
  BootstrapTable.prototype.onSearch = function (event) {
    var text = $.trim($(event.currentTarget).val());
    // trim search input
    if (this.options.trimOnSearch && $(event.currentTarget).val() !== text) {
      $(event.currentTarget).val(text);
    }
    if (text === this.searchText) {
      return;
    }
    this.searchText = text;
    this.options.searchText = text;
    this.options.pageNumber = 1;
    this.initSearch();
    this.updatePagination();
    this.trigger(&#39;search&#39;, text);
  };
  BootstrapTable.prototype.initSearch = function () {
    var that = this;
    if (this.options.sidePagination !== &#39;server&#39;) {
      if (this.options.customSearch !== $.noop) {
        this.options.customSearch.apply(this, [this.searchText]);
        return;
      }
      var s = this.searchText && (this.options.escape ?
        escapeHTML(this.searchText) : this.searchText).toLowerCase();
      var f = $.isEmptyObject(this.filterColumns) ? null : this.filterColumns;
      // Check filter
      this.data = f ? $.grep(this.options.data, function (item, i) {
        for (var key in f) {
          if ($.isArray(f[key]) && $.inArray(item[key], f[key]) === -1 ||
            !$.isArray(f[key]) && item[key] !== f[key]) {
            return false;
          }
        }
        return true;
      }) : this.options.data;
      this.data = s ? $.grep(this.data, function (item, i) {
        for (var j = 0; j < that.header.fields.length; j++) {
          if (!that.header.searchables[j]) {
            continue;
          }
          var key = $.isNumeric(that.header.fields[j]) ? parseInt(that.header.fields[j], 10) : that.header.fields[j];
          var column = that.columns[getFieldIndex(that.columns, key)];
          var value;
          if (typeof key === &#39;string&#39;) {
            value = item;
            var props = key.split(&#39;.&#39;);
            for (var prop_index = 0; prop_index < props.length; prop_index++) {
              value = value[props[prop_index]];
            }
            // Fix #142: respect searchForamtter boolean
            if (column && column.searchFormatter) {
              value = calculateObjectValue(column,
                that.header.formatters[j], [value, item, i], value);
            }
          } else {
            value = item[key];
          }
          if (typeof value === &#39;string&#39; || typeof value === &#39;number&#39;) {
            if (that.options.strictSearch) {
              if ((value + &#39;&#39;).toLowerCase() === s) {
                return true;
              }
            } else {
              if ((value + &#39;&#39;).toLowerCase().indexOf(s) !== -1) {
                return true;
              }
            }
          }
        }
        return false;
      }) : this.data;
    }
  };
  BootstrapTable.prototype.initPagination = function () {
    if (!this.options.pagination) {
      this.$pagination.hide();
      return;
    } else {
      this.$pagination.show();
    }
    var that = this,
      html = [],
      $allSelected = false,
      i, from, to,
      $pageList,
      $first, $pre,
      $next, $last,
      $number,
      data = this.getData(),
      pageList = this.options.pageList;
    if (this.options.sidePagination !== &#39;server&#39;) {
      this.options.totalRows = data.length;
    }
    this.totalPages = 0;
    if (this.options.totalRows) {
      if (this.options.pageSize === this.options.formatAllRows()) {
        this.options.pageSize = this.options.totalRows;
        $allSelected = true;
      } else if (this.options.pageSize === this.options.totalRows) {
        // Fix #667 Table with pagination,
        // multiple pages and a search that matches to one page throws exception
        var pageLst = typeof this.options.pageList === &#39;string&#39; ?
          this.options.pageList.replace(&#39;[&#39;, &#39;&#39;).replace(&#39;]&#39;, &#39;&#39;)
            .replace(/ /g, &#39;&#39;).toLowerCase().split(&#39;,&#39;) : this.options.pageList;
        if ($.inArray(this.options.formatAllRows().toLowerCase(), pageLst) > -1) {
          $allSelected = true;
        }
      }
      this.totalPages = ~~((this.options.totalRows - 1) / this.options.pageSize) + 1;
      this.options.totalPages = this.totalPages;
    }
    if (this.totalPages > 0 && this.options.pageNumber > this.totalPages) {
      this.options.pageNumber = this.totalPages;
    }
    this.pageFrom = (this.options.pageNumber - 1) * this.options.pageSize + 1;
    this.pageTo = this.options.pageNumber * this.options.pageSize;
    if (this.pageTo > this.options.totalRows) {
      this.pageTo = this.options.totalRows;
    }
    html.push(
      &#39;<p class="pull-&#39; + this.options.paginationDetailHAlign + &#39; pagination-detail">&#39;,
      &#39;<span class="pagination-info">&#39;,
      this.options.onlyInfoPagination ? this.options.formatDetailPagination(this.options.totalRows) :
        this.options.formatShowingRows(this.pageFrom, this.pageTo, this.options.totalRows),
      &#39;</span>&#39;);
    if (!this.options.onlyInfoPagination) {
      html.push(&#39;<span class="page-list">&#39;);
      var pageNumber = [
        sprintf(&#39;<span class="btn-group %s">&#39;,
          this.options.paginationVAlign === &#39;top&#39; || this.options.paginationVAlign === &#39;both&#39; ?
            &#39;dropdown&#39; : &#39;dropup&#39;),
        &#39;<button type="button" class="btn&#39; +
        sprintf(&#39; btn-%s&#39;, this.options.buttonsClass) +
        sprintf(&#39; btn-%s&#39;, this.options.iconSize) +
        &#39; dropdown-toggle" data-toggle="dropdown">&#39;,
        &#39;<span class="page-size">&#39;,
        $allSelected ? this.options.formatAllRows() : this.options.pageSize,
        &#39;</span>&#39;,
        &#39; <span class="caret"></span>&#39;,
        &#39;</button>&#39;,
        &#39;<ul class="dropdown-menu" role="menu">&#39;
      ];
      if (typeof this.options.pageList === &#39;string&#39;) {
        var list = this.options.pageList.replace(&#39;[&#39;, &#39;&#39;).replace(&#39;]&#39;, &#39;&#39;)
          .replace(/ /g, &#39;&#39;).split(&#39;,&#39;);
        pageList = [];
        $.each(list, function (i, value) {
          pageList.push(value.toUpperCase() === that.options.formatAllRows().toUpperCase() ?
            that.options.formatAllRows() : +value);
        });
      }
      $.each(pageList, function (i, page) {
        if (!that.options.smartDisplay || i === 0 || pageList[i - 1] < that.options.totalRows) {
          var active;
          if ($allSelected) {
            active = page === that.options.formatAllRows() ? &#39; class="active"&#39; : &#39;&#39;;
          } else {
            active = page === that.options.pageSize ? &#39; class="active"&#39; : &#39;&#39;;
          }
          pageNumber.push(sprintf(&#39;<li role="menuitem"%s><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >%s</a></li>&#39;, active, page));
        }
      });
      pageNumber.push(&#39;</ul></span>&#39;);
      html.push(this.options.formatRecordsPerPage(pageNumber.join(&#39;&#39;)));
      html.push(&#39;</span>&#39;);
      html.push(&#39;</p>&#39;,
        &#39;<p class="pull-&#39; + this.options.paginationHAlign + &#39; pagination">&#39;,
        &#39;<ul class="pagination&#39; + sprintf(&#39; pagination-%s&#39;, this.options.iconSize) + &#39;">&#39;,
        &#39;<li class="page-pre"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >&#39; + this.options.paginationPreText + &#39;</a></li>&#39;);
      if (this.totalPages < 5) {
        from = 1;
        to = this.totalPages;
      } else {
        from = this.options.pageNumber - 2;
        to = from + 4;
        if (from < 1) {
          from = 1;
          to = 5;
        }
        if (to > this.totalPages) {
          to = this.totalPages;
          from = to - 4;
        }
      }
      if (this.totalPages >= 6) {
        if (this.options.pageNumber >= 3) {
          html.push(&#39;<li class="page-first&#39; + (1 === this.options.pageNumber ? &#39; active&#39; : &#39;&#39;) + &#39;">&#39;,
            &#39;<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >&#39;, 1, &#39;</a>&#39;,
            &#39;</li>&#39;);
          from++;
        }
        if (this.options.pageNumber >= 4) {
          if (this.options.pageNumber == 4 || this.totalPages == 6 || this.totalPages == 7) {
            from--;
          } else {
            html.push(&#39;<li class="page-first-separator disabled">&#39;,
              &#39;<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >...</a>&#39;,
              &#39;</li>&#39;);
          }
          to--;
        }
      }
      if (this.totalPages >= 7) {
        if (this.options.pageNumber >= (this.totalPages - 2)) {
          from--;
        }
      }
      if (this.totalPages == 6) {
        if (this.options.pageNumber >= (this.totalPages - 2)) {
          to++;
        }
      } else if (this.totalPages >= 7) {
        if (this.totalPages == 7 || this.options.pageNumber >= (this.totalPages - 3)) {
          to++;
        }
      }
      for (i = from; i <= to; i++) {
        html.push(&#39;<li class="page-number&#39; + (i === this.options.pageNumber ? &#39; active&#39; : &#39;&#39;) + &#39;">&#39;,
          &#39;<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >&#39;, i, &#39;</a>&#39;,
          &#39;</li>&#39;);
      }
      if (this.totalPages >= 8) {
        if (this.options.pageNumber <= (this.totalPages - 4)) {
          html.push(&#39;<li class="page-last-separator disabled">&#39;,
            &#39;<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >...</a>&#39;,
            &#39;</li>&#39;);
        }
      }
      if (this.totalPages >= 6) {
        if (this.options.pageNumber <= (this.totalPages - 3)) {
          html.push(&#39;<li class="page-last&#39; + (this.totalPages === this.options.pageNumber ? &#39; active&#39; : &#39;&#39;) + &#39;">&#39;,
            &#39;<a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >&#39;, this.totalPages, &#39;</a>&#39;,
            &#39;</li>&#39;);
        }
      }
      html.push(
        &#39;<li class="page-next"><a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >&#39; + this.options.paginationNextText + &#39;</a></li>&#39;,
        &#39;</ul>&#39;,
        &#39;</p>&#39;);
    }
    this.$pagination.html(html.join(&#39;&#39;));
    if (!this.options.onlyInfoPagination) {
      $pageList = this.$pagination.find(&#39;.page-list a&#39;);
      $first = this.$pagination.find(&#39;.page-first&#39;);
      $pre = this.$pagination.find(&#39;.page-pre&#39;);
      $next = this.$pagination.find(&#39;.page-next&#39;);
      $last = this.$pagination.find(&#39;.page-last&#39;);
      $number = this.$pagination.find(&#39;.page-number&#39;);
      if (this.options.smartDisplay) {
        if (this.totalPages <= 1) {
          this.$pagination.find(&#39;p.pagination&#39;).hide();
        }
        if (pageList.length < 2 || this.options.totalRows <= pageList[0]) {
          this.$pagination.find(&#39;span.page-list&#39;).hide();
        }
        // when data is empty, hide the pagination
        this.$pagination[this.getData().length ? &#39;show&#39; : &#39;hide&#39;]();
      }
      if (!this.options.paginationLoop) {
        if (this.options.pageNumber === 1) {
          $pre.addClass(&#39;disabled&#39;);
        }
        if (this.options.pageNumber === this.totalPages) {
          $next.addClass(&#39;disabled&#39;);
        }
      }
      if ($allSelected) {
        this.options.pageSize = this.options.formatAllRows();
      }
      $pageList.off(&#39;click&#39;).on(&#39;click&#39;, $.proxy(this.onPageListChange, this));
      $first.off(&#39;click&#39;).on(&#39;click&#39;, $.proxy(this.onPageFirst, this));
      $pre.off(&#39;click&#39;).on(&#39;click&#39;, $.proxy(this.onPagePre, this));
      $next.off(&#39;click&#39;).on(&#39;click&#39;, $.proxy(this.onPageNext, this));
      $last.off(&#39;click&#39;).on(&#39;click&#39;, $.proxy(this.onPageLast, this));
      $number.off(&#39;click&#39;).on(&#39;click&#39;, $.proxy(this.onPageNumber, this));
    }
  };
  BootstrapTable.prototype.updatePagination = function (event) {
    // Fix #171: IE disabled button can be clicked bug.
    if (event && $(event.currentTarget).hasClass(&#39;disabled&#39;)) {
      return;
    }
    if (!this.options.maintainSelected) {
      this.resetRows();
    }
    this.initPagination();
    if (this.options.sidePagination === &#39;server&#39;) {
      this.initServer();
    } else {
      this.initBody();
    }
    this.trigger(&#39;page-change&#39;, this.options.pageNumber, this.options.pageSize);
  };
  BootstrapTable.prototype.onPageListChange = function (event) {
    var $this = $(event.currentTarget);
    $this.parent().addClass(&#39;active&#39;).siblings().removeClass(&#39;active&#39;);
    this.options.pageSize = $this.text().toUpperCase() === this.options.formatAllRows().toUpperCase() ?
      this.options.formatAllRows() : +$this.text();
    this.$toolbar.find(&#39;.page-size&#39;).text(this.options.pageSize);
    this.updatePagination(event);
    return false;
  };
  BootstrapTable.prototype.onPageFirst = function (event) {
    this.options.pageNumber = 1;
    this.updatePagination(event);
    return false;
  };
  BootstrapTable.prototype.onPagePre = function (event) {
    if ((this.options.pageNumber - 1) === 0) {
      this.options.pageNumber = this.options.totalPages;
    } else {
      this.options.pageNumber--;
    }
    this.updatePagination(event);
    return false;
  };
  BootstrapTable.prototype.onPageNext = function (event) {
    if ((this.options.pageNumber + 1) > this.options.totalPages) {
      this.options.pageNumber = 1;
    } else {
      this.options.pageNumber++;
    }
    this.updatePagination(event);
    return false;
  };
  BootstrapTable.prototype.onPageLast = function (event) {
    this.options.pageNumber = this.totalPages;
    this.updatePagination(event);
    return false;
  };
  BootstrapTable.prototype.onPageNumber = function (event) {
    if (this.options.pageNumber === +$(event.currentTarget).text()) {
      return;
    }
    this.options.pageNumber = +$(event.currentTarget).text();
    this.updatePagination(event);
    return false;
  };
  BootstrapTable.prototype.initRow = function (item, i, data, parentDom) {
    var that = this,
      key,
      html = [],
      style = {},
      csses = [],
      data_ = &#39;&#39;,
      attributes = {},
      htmlAttributes = [];
    if ($.inArray(item, this.hiddenRows) > -1) {
      return;
    }
    style = calculateObjectValue(this.options, this.options.rowStyle, [item, i], style);
    if (style && style.css) {
      for (key in style.css) {
        csses.push(key + &#39;: &#39; + style.css[key]);
      }
    }
    attributes = calculateObjectValue(this.options,
      this.options.rowAttributes, [item, i], attributes);
    if (attributes) {
      for (key in attributes) {
        htmlAttributes.push(sprintf(&#39;%s="%s"&#39;, key, escapeHTML(attributes[key])));
      }
    }
    if (item._data && !$.isEmptyObject(item._data)) {
      $.each(item._data, function (k, v) {
        // ignore data-index
        if (k === &#39;index&#39;) {
          return;
        }
        data_ += sprintf(&#39; data-%s="%s"&#39;, k, v);
      });
    }
    html.push(&#39;<tr&#39;,
      sprintf(&#39; %s&#39;, htmlAttributes.join(&#39; &#39;)),
      sprintf(&#39; id="%s"&#39;, $.isArray(item) ? undefined : item._id),
      sprintf(&#39; class="%s"&#39;, style.classes || ($.isArray(item) ? undefined : item._class)),
      sprintf(&#39; data-index="%s"&#39;, i),
      sprintf(&#39; data-uniqueid="%s"&#39;, item[this.options.uniqueId]),
      sprintf(&#39;%s&#39;, data_),
      &#39;>&#39;
    );
    if (this.options.cardView) {
      html.push(sprintf(&#39;<td colspan="%s"><p class="card-views">&#39;, this.header.fields.length));
    }
    if (!this.options.cardView && this.options.detailView) {
      html.push(&#39;<td>&#39;,
        &#39;<a class="detail-icon" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >&#39;,
        sprintf(&#39;<i class="%s %s"></i>&#39;, this.options.iconsPrefix, this.options.icons.detailOpen),
        &#39;</a>&#39;,
        &#39;</td>&#39;);
    }
    $.each(this.header.fields, function (j, field) {
      var text = &#39;&#39;,
        value_ = getItemField(item, field, that.options.escape),
        value = &#39;&#39;,
        type = &#39;&#39;,
        cellStyle = {},
        id_ = &#39;&#39;,
        class_ = that.header.classes[j],
        data_ = &#39;&#39;,
        rowspan_ = &#39;&#39;,
        colspan_ = &#39;&#39;,
        title_ = &#39;&#39;,
        column = that.columns[j];
      if (that.fromHtml && typeof value_ === &#39;undefined&#39;) {
        return;
      }
      if (!column.visible) {
        return;
      }
      if (that.options.cardView && (!column.cardVisible)) {
        return;
      }
      if (column.escape) {
        value_ = escapeHTML(value_);
      }
      style = sprintf(&#39;style="%s"&#39;, csses.concat(that.header.styles[j]).join(&#39;; &#39;));
      // handle td&#39;s id and class
      if (item[&#39;_&#39; + field + &#39;_id&#39;]) {
        id_ = sprintf(&#39; id="%s"&#39;, item[&#39;_&#39; + field + &#39;_id&#39;]);
      }
      if (item[&#39;_&#39; + field + &#39;_class&#39;]) {
        class_ = sprintf(&#39; class="%s"&#39;, item[&#39;_&#39; + field + &#39;_class&#39;]);
      }
      if (item[&#39;_&#39; + field + &#39;_rowspan&#39;]) {
        rowspan_ = sprintf(&#39; rowspan="%s"&#39;, item[&#39;_&#39; + field + &#39;_rowspan&#39;]);
      }
      if (item[&#39;_&#39; + field + &#39;_colspan&#39;]) {
        colspan_ = sprintf(&#39; colspan="%s"&#39;, item[&#39;_&#39; + field + &#39;_colspan&#39;]);
      }
      if (item[&#39;_&#39; + field + &#39;_title&#39;]) {
        title_ = sprintf(&#39; title="%s"&#39;, item[&#39;_&#39; + field + &#39;_title&#39;]);
      }
      cellStyle = calculateObjectValue(that.header,
        that.header.cellStyles[j], [value_, item, i, field], cellStyle);
      if (cellStyle.classes) {
        class_ = sprintf(&#39; class="%s"&#39;, cellStyle.classes);
      }
      if (cellStyle.css) {
        var csses_ = [];
        for (var key in cellStyle.css) {
          csses_.push(key + &#39;: &#39; + cellStyle.css[key]);
        }
        style = sprintf(&#39;style="%s"&#39;, csses_.concat(that.header.styles[j]).join(&#39;; &#39;));
      }
      value = calculateObjectValue(column,
        that.header.formatters[j], [value_, item, i], value_);
      if (item[&#39;_&#39; + field + &#39;_data&#39;] && !$.isEmptyObject(item[&#39;_&#39; + field + &#39;_data&#39;])) {
        $.each(item[&#39;_&#39; + field + &#39;_data&#39;], function (k, v) {
          // ignore data-index
          if (k === &#39;index&#39;) {
            return;
          }
          data_ += sprintf(&#39; data-%s="%s"&#39;, k, v);
        });
      }
      if (column.checkbox || column.radio) {
        type = column.checkbox ? &#39;checkbox&#39; : type;
        type = column.radio ? &#39;radio&#39; : type;
        text = [sprintf(that.options.cardView ?
          &#39;<p class="card-view %s">&#39; : &#39;<td class="bs-checkbox %s">&#39;, column[&#39;class&#39;] || &#39;&#39;),
        &#39;<input&#39; +
        sprintf(&#39; data-index="%s"&#39;, i) +
        sprintf(&#39; name="%s"&#39;, that.options.selectItemName) +
        sprintf(&#39; type="%s"&#39;, type) +
        sprintf(&#39; value="%s"&#39;, item[that.options.idField]) +
        sprintf(&#39; checked="%s"&#39;, value === true ||
          (value_ || value && value.checked) ? &#39;checked&#39; : undefined) +
        sprintf(&#39; disabled="%s"&#39;, !column.checkboxEnabled ||
          (value && value.disabled) ? &#39;disabled&#39; : undefined) +
        &#39; />&#39;,
        that.header.formatters[j] && typeof value === &#39;string&#39; ? value : &#39;&#39;,
        that.options.cardView ? &#39;</p>&#39; : &#39;</td>&#39;
        ].join(&#39;&#39;);
        item[that.header.stateField] = value === true || (value && value.checked);
      } else {
        value = typeof value === &#39;undefined&#39; || value === null ?
          that.options.undefinedText : value;
        text = that.options.cardView ? [&#39;<p class="card-view">&#39;,
          that.options.showHeader ? sprintf(&#39;<span class="title" %s>%s</span>&#39;, style,
            getPropertyFromOther(that.columns, &#39;field&#39;, &#39;title&#39;, field)) : &#39;&#39;,
          sprintf(&#39;<span class="value">%s</span>&#39;, value),
          &#39;</p>&#39;
        ].join(&#39;&#39;) : [sprintf(&#39;<td%s %s %s %s %s %s %s>&#39;,
          id_, class_, style, data_, rowspan_, colspan_, title_),
          value,
          &#39;</td>&#39;
        ].join(&#39;&#39;);
        // Hide empty data on Card view when smartDisplay is set to true.
        if (that.options.cardView && that.options.smartDisplay && value === &#39;&#39;) {
          // Should set a placeholder for event binding correct fieldIndex
          text = &#39;<p class="card-view"></p>&#39;;
        }
      }
      html.push(text);
    });
    if (this.options.cardView) {
      html.push(&#39;</p></td>&#39;);
    }
    html.push(&#39;</tr>&#39;);
    return html.join(&#39; &#39;);
  };
  BootstrapTable.prototype.initBody = function (fixedScroll) {
    var that = this,
      html = [],
      data = this.getData();
    this.trigger(&#39;pre-body&#39;, data);
    this.$body = this.$el.find(&#39;>tbody&#39;);
    if (!this.$body.length) {
      this.$body = $(&#39;<tbody></tbody>&#39;).appendTo(this.$el);
    }
    //Fix #389 Bootstrap-table-flatJSON is not working
    if (!this.options.pagination || this.options.sidePagination === &#39;server&#39;) {
      this.pageFrom = 1;
      this.pageTo = data.length;
    }
    var trFragments = $(document.createDocumentFragment());
    var hasTr;
    for (var i = this.pageFrom - 1; i < this.pageTo; i++) {
      var item = data[i];
      var tr = this.initRow(item, i, data, trFragments);
      hasTr = hasTr || !!tr;
      if (tr && tr !== true) {
        trFragments.append(tr);
      }
    }
    // show no records
    if (!hasTr) {
      trFragments.append(&#39;<tr class="no-records-found">&#39; +
        sprintf(&#39;<td colspan="%s">%s</td>&#39;,
          this.$header.find(&#39;th&#39;).length,
          this.options.formatNoMatches()) +
        &#39;</tr>&#39;);
    }
    this.$body.html(trFragments);
    if (!fixedScroll) {
      this.scrollTo(0);
    }
    // click to select by column
    this.$body.find(&#39;> tr[data-index] > td&#39;).off(&#39;click dblclick&#39;).on(&#39;click dblclick&#39;, function (e) {
      var $td = $(this),
        $tr = $td.parent(),
        item = that.data[$tr.data(&#39;index&#39;)],
        index = $td[0].cellIndex,
        fields = that.getVisibleFields(),
        field = fields[that.options.detailView && !that.options.cardView ? index - 1 : index],
        column = that.columns[getFieldIndex(that.columns, field)],
        value = getItemField(item, field, that.options.escape);
      if ($td.find(&#39;.detail-icon&#39;).length) {
        return;
      }
      that.trigger(e.type === &#39;click&#39; ? &#39;click-cell&#39; : &#39;dbl-click-cell&#39;, field, value, item, $td);
      that.trigger(e.type === &#39;click&#39; ? &#39;click-row&#39; : &#39;dbl-click-row&#39;, item, $tr, field);
      // if click to select - then trigger the checkbox/radio click
      if (e.type === &#39;click&#39; && that.options.clickToSelect && column.clickToSelect) {
        var $selectItem = $tr.find(sprintf(&#39;[name="%s"]&#39;, that.options.selectItemName));
        if ($selectItem.length) {
          $selectItem[0].click(); // #144: .trigger(&#39;click&#39;) bug
        }
      }
    });
    this.$body.find(&#39;> tr[data-index] > td > .detail-icon&#39;).off(&#39;click&#39;).on(&#39;click&#39;, function () {
      var $this = $(this),
        $tr = $this.parent().parent(),
        index = $tr.data(&#39;index&#39;),
        row = data[index]; // Fix #980 Detail view, when searching, returns wrong row
      // remove and update
      if ($tr.next().is(&#39;tr.detail-view&#39;)) {
        $this.find(&#39;i&#39;).attr(&#39;class&#39;, sprintf(&#39;%s %s&#39;, that.options.iconsPrefix, that.options.icons.detailOpen));
        that.trigger(&#39;collapse-row&#39;, index, row);
        $tr.next().remove();
      } else {
        $this.find(&#39;i&#39;).attr(&#39;class&#39;, sprintf(&#39;%s %s&#39;, that.options.iconsPrefix, that.options.icons.detailClose));
        $tr.after(sprintf(&#39;<tr class="detail-view"><td colspan="%s"></td></tr>&#39;, $tr.find(&#39;td&#39;).length));
        var $element = $tr.next().find(&#39;td&#39;);
        var content = calculateObjectValue(that.options, that.options.detailFormatter, [index, row, $element], &#39;&#39;);
        if ($element.length === 1) {
          $element.append(content);
        }
        that.trigger(&#39;expand-row&#39;, index, row, $element);
      }
      that.resetView();
      return false;
    });
    this.$selectItem = this.$body.find(sprintf(&#39;[name="%s"]&#39;, this.options.selectItemName));
    this.$selectItem.off(&#39;click&#39;).on(&#39;click&#39;, function (event) {
      event.stopImmediatePropagation();
      var $this = $(this),
        checked = $this.prop(&#39;checked&#39;),
        row = that.data[$this.data(&#39;index&#39;)];
      if (that.options.maintainSelected && $(this).is(&#39;:radio&#39;)) {
        $.each(that.options.data, function (i, row) {
          row[that.header.stateField] = false;
        });
      }
      row[that.header.stateField] = checked;
      if (that.options.singleSelect) {
        that.$selectItem.not(this).each(function () {
          that.data[$(this).data(&#39;index&#39;)][that.header.stateField] = false;
        });
        that.$selectItem.filter(&#39;:checked&#39;).not(this).prop(&#39;checked&#39;, false);
      }
      that.updateSelected();
      that.trigger(checked ? &#39;check&#39; : &#39;uncheck&#39;, row, $this);
    });
    $.each(this.header.events, function (i, events) {
      if (!events) {
        return;
      }
      // fix bug, if events is defined with namespace
      if (typeof events === &#39;string&#39;) {
        events = calculateObjectValue(null, events);
      }
      var field = that.header.fields[i],
        fieldIndex = $.inArray(field, that.getVisibleFields());
      if (that.options.detailView && !that.options.cardView) {
        fieldIndex += 1;
      }
      for (var key in events) {
        that.$body.find(&#39;>tr:not(.no-records-found)&#39;).each(function () {
          var $tr = $(this),
            $td = $tr.find(that.options.cardView ? &#39;.card-view&#39; : &#39;td&#39;).eq(fieldIndex),
            index = key.indexOf(&#39; &#39;),
            name = key.substring(0, index),
            el = key.substring(index + 1),
            func = events[key];
          $td.find(el).off(name).on(name, function (e) {
            var index = $tr.data(&#39;index&#39;),
              row = that.data[index],
              value = row[field];
            func.apply(this, [e, value, row, index]);
          });
        });
      }
    });
    this.updateSelected();
    this.resetView();
    this.trigger(&#39;post-body&#39;, data);
  };
  BootstrapTable.prototype.initServer = function (silent, query, url) {
    var that = this,
      data = {},
      params = {
        searchText: this.searchText,
        sortName: this.options.sortName,
        sortOrder: this.options.sortOrder
      },
      request;
    if (this.options.pagination) {
      params.pageSize = this.options.pageSize === this.options.formatAllRows() ?
        this.options.totalRows : this.options.pageSize;
      params.pageNumber = this.options.pageNumber;
    }
    if (!(url || this.options.url) && !this.options.ajax) {
      return;
    }
    if (this.options.queryParamsType === &#39;limit&#39;) {
      params = {
        search: params.searchText,
        sort: params.sortName,
        order: params.sortOrder
      };
      if (this.options.pagination) {
        params.offset = this.options.pageSize === this.options.formatAllRows() ?
          0 : this.options.pageSize * (this.options.pageNumber - 1);
        params.limit = this.options.pageSize === this.options.formatAllRows() ?
          this.options.totalRows : this.options.pageSize;
      }
    }
    if (!($.isEmptyObject(this.filterColumnsPartial))) {
      params.filter = JSON.stringify(this.filterColumnsPartial, null);
    }
    data = calculateObjectValue(this.options, this.options.queryParams, [params], data);
    $.extend(data, query || {});
    // false to stop request
    if (data === false) {
      return;
    }
    if (!silent) {
      this.$tableLoading.show();
    }
    request = $.extend({}, calculateObjectValue(null, this.options.ajaxOptions), {
      type: this.options.method,
      url: url || this.options.url,
      data: this.options.contentType === &#39;application/json&#39; && this.options.method === &#39;post&#39; ?
        JSON.stringify(data) : data,
      cache: this.options.cache,
      contentType: this.options.contentType,
      dataType: this.options.dataType,
      success: function (res) {
        res = calculateObjectValue(that.options, that.options.responseHandler, [res], res);
        that.load(res);
        that.trigger(&#39;load-success&#39;, res);
        if (!silent) that.$tableLoading.hide();
      },
      error: function (res) {
        that.trigger(&#39;load-error&#39;, res.status, res);
        if (!silent) that.$tableLoading.hide();
      }
    });
    if (this.options.ajax) {
      calculateObjectValue(this, this.options.ajax, [request], null);
    } else {
      if (this._xhr && this._xhr.readyState !== 4) {
        this._xhr.abort();
      }
      this._xhr = $.ajax(request);
    }
  };
  BootstrapTable.prototype.initSearchText = function () {
    if (this.options.search) {
      if (this.options.searchText !== &#39;&#39;) {
        var $search = this.$toolbar.find(&#39;.search input&#39;);
        $search.val(this.options.searchText);
        this.onSearch({ currentTarget: $search });
      }
    }
  };
  BootstrapTable.prototype.getCaret = function () {
    var that = this;
    $.each(this.$header.find(&#39;th&#39;), function (i, th) {
      $(th).find(&#39;.sortable&#39;).removeClass(&#39;desc asc&#39;).addClass($(th).data(&#39;field&#39;) === that.options.sortName ? that.options.sortOrder : &#39;both&#39;);
    });
  };
  BootstrapTable.prototype.updateSelected = function () {
    var checkAll = this.$selectItem.filter(&#39;:enabled&#39;).length &&
      this.$selectItem.filter(&#39;:enabled&#39;).length ===
      this.$selectItem.filter(&#39;:enabled&#39;).filter(&#39;:checked&#39;).length;
    this.$selectAll.add(this.$selectAll_).prop(&#39;checked&#39;, checkAll);
    this.$selectItem.each(function () {
      $(this).closest(&#39;tr&#39;)[$(this).prop(&#39;checked&#39;) ? &#39;addClass&#39; : &#39;removeClass&#39;](&#39;selected&#39;);
    });
  };
  BootstrapTable.prototype.updateRows = function () {
    var that = this;
    this.$selectItem.each(function () {
      that.data[$(this).data(&#39;index&#39;)][that.header.stateField] = $(this).prop(&#39;checked&#39;);
    });
  };
  BootstrapTable.prototype.resetRows = function () {
    var that = this;
    $.each(this.data, function (i, row) {
      that.$selectAll.prop(&#39;checked&#39;, false);
      that.$selectItem.prop(&#39;checked&#39;, false);
      if (that.header.stateField) {
        row[that.header.stateField] = false;
      }
    });
    this.initHiddenRows();
  };
  BootstrapTable.prototype.trigger = function (name) {
    var args = Array.prototype.slice.call(arguments, 1);
    name += &#39;.bs.table&#39;;
    this.options[BootstrapTable.EVENTS[name]].apply(this.options, args);
    this.$el.trigger($.Event(name), args);
    this.options.onAll(name, args);
    this.$el.trigger($.Event(&#39;all.bs.table&#39;), [name, args]);
  };
  BootstrapTable.prototype.resetHeader = function () {
    // fix #61: the hidden table reset header bug.
    // fix bug: get $el.css(&#39;width&#39;) error sometime (height = 500)
    clearTimeout(this.timeoutId_);
    this.timeoutId_ = setTimeout($.proxy(this.fitHeader, this), this.$el.is(&#39;:hidden&#39;) ? 100 : 0);
  };
  BootstrapTable.prototype.fitHeader = function () {
    var that = this,
      fixedBody,
      scrollWidth,
      focused,
      focusedTemp;
    if (that.$el.is(&#39;:hidden&#39;)) {
      that.timeoutId_ = setTimeout($.proxy(that.fitHeader, that), 100);
      return;
    }
    fixedBody = this.$tableBody.get(0);
    scrollWidth = fixedBody.scrollWidth > fixedBody.clientWidth &&
      fixedBody.scrollHeight > fixedBody.clientHeight + this.$header.outerHeight() ?
      getScrollBarWidth() : 0;
    this.$el.css(&#39;margin-top&#39;, -this.$header.outerHeight());
    focused = $(&#39;:focus&#39;);
    if (focused.length > 0) {
      var $th = focused.parents(&#39;th&#39;);
      if ($th.length > 0) {
        var dataField = $th.attr(&#39;data-field&#39;);
        if (dataField !== undefined) {
          var $headerTh = this.$header.find("[data-field=&#39;" + dataField + "&#39;]");
          if ($headerTh.length > 0) {
            $headerTh.find(":input").addClass("focus-temp");
          }
        }
      }
    }
    this.$header_ = this.$header.clone(true, true);
    this.$selectAll_ = this.$header_.find(&#39;[name="btSelectAll"]&#39;);
    this.$tableHeader.css({
      &#39;margin-right&#39;: scrollWidth
    }).find(&#39;table&#39;).css(&#39;width&#39;, this.$el.outerWidth())
      .html(&#39;&#39;).attr(&#39;class&#39;, this.$el.attr(&#39;class&#39;))
      .append(this.$header_);
    focusedTemp = $(&#39;.focus-temp:visible:eq(0)&#39;);
    if (focusedTemp.length > 0) {
      focusedTemp.focus();
      this.$header.find(&#39;.focus-temp&#39;).removeClass(&#39;focus-temp&#39;);
    }
    // fix bug: $.data() is not working as expected after $.append()
    this.$header.find(&#39;th[data-field]&#39;).each(function (i) {
      that.$header_.find(sprintf(&#39;th[data-field="%s"]&#39;, $(this).data(&#39;field&#39;))).data($(this).data());
    });
    var visibleFields = this.getVisibleFields(),
      $ths = this.$header_.find(&#39;th&#39;);
    this.$body.find(&#39;>tr:first-child:not(.no-records-found) > *&#39;).each(function (i) {
      var $this = $(this),
        index = i;
      if (that.options.detailView && !that.options.cardView) {
        if (i === 0) {
          that.$header_.find(&#39;th.detail&#39;).find(&#39;.fht-cell&#39;).width($this.innerWidth());
        }
        index = i - 1;
      }
      var $th = that.$header_.find(sprintf(&#39;th[data-field="%s"]&#39;, visibleFields[index]));
      if ($th.length > 1) {
        $th = $($ths[$this[0].cellIndex]);
      }
      $th.find(&#39;.fht-cell&#39;).width($this.innerWidth());
    });
    // horizontal scroll event
    // TODO: it&#39;s probably better improving the layout than binding to scroll event
    this.$tableBody.off(&#39;scroll&#39;).on(&#39;scroll&#39;, function () {
      that.$tableHeader.scrollLeft($(this).scrollLeft());
      if (that.options.showFooter && !that.options.cardView) {
        that.$tableFooter.scrollLeft($(this).scrollLeft());
      }
    });
    that.trigger(&#39;post-header&#39;);
  };
  BootstrapTable.prototype.resetFooter = function () {
    var that = this,
      data = that.getData(),
      html = [];
    if (!this.options.showFooter || this.options.cardView) { //do nothing
      return;
    }
    if (!this.options.cardView && this.options.detailView) {
      html.push(&#39;<td><p class="th-inner"> </p><p class="fht-cell"></p></td>&#39;);
    }
    $.each(this.columns, function (i, column) {
      var key,
        falign = &#39;&#39;, // footer align style
        valign = &#39;&#39;,
        csses = [],
        style = {},
        class_ = sprintf(&#39; class="%s"&#39;, column[&#39;class&#39;]);
      if (!column.visible) {
        return;
      }
      if (that.options.cardView && (!column.cardVisible)) {
        return;
      }
      falign = sprintf(&#39;text-align: %s; &#39;, column.falign ? column.falign : column.align);
      valign = sprintf(&#39;vertical-align: %s; &#39;, column.valign);
      style = calculateObjectValue(null, that.options.footerStyle);
      if (style && style.css) {
        for (key in style.css) {
          csses.push(key + &#39;: &#39; + style.css[key]);
        }
      }
      html.push(&#39;<td&#39;, class_, sprintf(&#39; style="%s"&#39;, falign + valign + csses.concat().join(&#39;; &#39;)), &#39;>&#39;);
      html.push(&#39;<p class="th-inner">&#39;);
      html.push(calculateObjectValue(column, column.footerFormatter, [data], &#39; &#39;) || &#39; &#39;);
      html.push(&#39;</p>&#39;);
      html.push(&#39;<p class="fht-cell"></p>&#39;);
      html.push(&#39;</p>&#39;);
      html.push(&#39;</td>&#39;);
    });
    this.$tableFooter.find(&#39;tr&#39;).html(html.join(&#39;&#39;));
    this.$tableFooter.show();
    clearTimeout(this.timeoutFooter_);
    this.timeoutFooter_ = setTimeout($.proxy(this.fitFooter, this),
      this.$el.is(&#39;:hidden&#39;) ? 100 : 0);
  };
  BootstrapTable.prototype.fitFooter = function () {
    var that = this,
      $footerTd,
      elWidth,
      scrollWidth;
    clearTimeout(this.timeoutFooter_);
    if (this.$el.is(&#39;:hidden&#39;)) {
      this.timeoutFooter_ = setTimeout($.proxy(this.fitFooter, this), 100);
      return;
    }
    elWidth = this.$el.css(&#39;width&#39;);
    scrollWidth = elWidth > this.$tableBody.width() ? getScrollBarWidth() : 0;
    this.$tableFooter.css({
      &#39;margin-right&#39;: scrollWidth
    }).find(&#39;table&#39;).css(&#39;width&#39;, elWidth)
      .attr(&#39;class&#39;, this.$el.attr(&#39;class&#39;));
    $footerTd = this.$tableFooter.find(&#39;td&#39;);
    this.$body.find(&#39;>tr:first-child:not(.no-records-found) > *&#39;).each(function (i) {
      var $this = $(this);
      $footerTd.eq(i).find(&#39;.fht-cell&#39;).width($this.innerWidth());
    });
  };
  BootstrapTable.prototype.toggleColumn = function (index, checked, needUpdate) {
    if (index === -1) {
      return;
    }
    this.columns[index].visible = checked;
    this.initHeader();
    this.initSearch();
    this.initPagination();
    this.initBody();
    if (this.options.showColumns) {
      var $items = this.$toolbar.find(&#39;.keep-open input&#39;).prop(&#39;disabled&#39;, false);
      if (needUpdate) {
        $items.filter(sprintf(&#39;[value="%s"]&#39;, index)).prop(&#39;checked&#39;, checked);
      }
      if ($items.filter(&#39;:checked&#39;).length <= this.options.minimumCountColumns) {
        $items.filter(&#39;:checked&#39;).prop(&#39;disabled&#39;, true);
      }
    }
  };
  BootstrapTable.prototype.getVisibleFields = function () {
    var that = this,
      visibleFields = [];
    $.each(this.header.fields, function (j, field) {
      var column = that.columns[getFieldIndex(that.columns, field)];
      if (!column.visible) {
        return;
      }
      visibleFields.push(field);
    });
    return visibleFields;
  };
  // PUBLIC FUNCTION DEFINITION
  // =======================
  BootstrapTable.prototype.resetView = function (params) {
    var padding = 0;
    if (params && params.height) {
      this.options.height = params.height;
    }
    this.$selectAll.prop(&#39;checked&#39;, this.$selectItem.length > 0 &&
      this.$selectItem.length === this.$selectItem.filter(&#39;:checked&#39;).length);
    if (this.options.height) {
      var toolbarHeight = this.$toolbar.outerHeight(true),
        paginationHeight = this.$pagination.outerHeight(true),
        height = this.options.height;
      if (this.options.height.toString().indexOf("%") != -1) {
        height = $(window).height() * (parseFloat(this.options.height) / 100);
      }
      height = height - toolbarHeight - paginationHeight;
      this.$tableContainer.css(&#39;height&#39;, height + &#39;px&#39;);
    }
    if (this.options.cardView) {
      // remove the element css
      this.$el.css(&#39;margin-top&#39;, &#39;0&#39;);
      this.$tableContainer.css(&#39;padding-bottom&#39;, &#39;0&#39;);
      this.$tableFooter.hide();
      return;
    }
    if (this.options.showHeader && this.options.height) {
      this.$tableHeader.show();
      this.resetHeader();
      padding += this.$header.outerHeight();
    } else {
      this.$tableHeader.hide();
      this.trigger(&#39;post-header&#39;);
    }
    if (this.options.showFooter) {
      this.resetFooter();
      if (this.options.height) {
        padding += this.$tableFooter.outerHeight() + 1;
      }
    }
    // Assign the correct sortable arrow
    this.getCaret();
    this.$tableContainer.css(&#39;padding-bottom&#39;, padding + &#39;px&#39;);
    this.trigger(&#39;reset-view&#39;);
  };
  BootstrapTable.prototype.getData = function (useCurrentPage) {
    return (this.searchText || !$.isEmptyObject(this.filterColumns) || !$.isEmptyObject(this.filterColumnsPartial)) ?
      (useCurrentPage ? this.data.slice(this.pageFrom - 1, this.pageTo) : this.data) :
      (useCurrentPage ? this.options.data.slice(this.pageFrom - 1, this.pageTo) : this.options.data);
  };
  BootstrapTable.prototype.load = function (data) {
    var fixedScroll = false;
    // #431: support pagination
    if (this.options.sidePagination === &#39;server&#39;) {
      this.options.totalRows = data[this.options.totalField];
      fixedScroll = data.fixedScroll;
      data = data[this.options.dataField];
    } else if (!$.isArray(data)) { // support fixedScroll
      fixedScroll = data.fixedScroll;
      data = data.data;
    }
    this.initData(data);
    this.initSearch();
    this.initPagination();
    this.initBody(fixedScroll);
  };
  BootstrapTable.prototype.append = function (data) {
    this.initData(data, &#39;append&#39;);
    this.initSearch();
    this.initPagination();
    this.initSort();
    this.initBody(true);
  };
  BootstrapTable.prototype.prepend = function (data) {
    this.initData(data, &#39;prepend&#39;);
    this.initSearch();
    this.initPagination();
    this.initSort();
    this.initBody(true);
  };
  BootstrapTable.prototype.remove = function (params) {
    var len = this.options.data.length,
      i, row;
    if (!params.hasOwnProperty(&#39;field&#39;) || !params.hasOwnProperty(&#39;values&#39;)) {
      return;
    }
    for (i = len - 1; i >= 0; i--) {
      row = this.options.data[i];
      if (!row.hasOwnProperty(params.field)) {
        continue;
      }
      if ($.inArray(row[params.field], params.values) !== -1) {
        this.options.data.splice(i, 1);
        if (this.options.sidePagination === &#39;server&#39;) {
          this.options.totalRows -= 1;
        }
      }
    }
    if (len === this.options.data.length) {
      return;
    }
    this.initSearch();
    this.initPagination();
    this.initSort();
    this.initBody(true);
  };
  BootstrapTable.prototype.removeAll = function () {
    if (this.options.data.length > 0) {
      this.options.data.splice(0, this.options.data.length);
      this.initSearch();
      this.initPagination();
      this.initBody(true);
    }
  };
  BootstrapTable.prototype.getRowByUniqueId = function (id) {
    var uniqueId = this.options.uniqueId,
      len = this.options.data.length,
      dataRow = null,
      i, row, rowUniqueId;
    for (i = len - 1; i >= 0; i--) {
      row = this.options.data[i];
      if (row.hasOwnProperty(uniqueId)) { // uniqueId is a column
        rowUniqueId = row[uniqueId];
      } else if (row._data.hasOwnProperty(uniqueId)) { // uniqueId is a row data property
        rowUniqueId = row._data[uniqueId];
      } else {
        continue;
      }
      if (typeof rowUniqueId === &#39;string&#39;) {
        id = id.toString();
      } else if (typeof rowUniqueId === &#39;number&#39;) {
        if ((Number(rowUniqueId) === rowUniqueId) && (rowUniqueId % 1 === 0)) {
          id = parseInt(id);
        } else if ((rowUniqueId === Number(rowUniqueId)) && (rowUniqueId !== 0)) {
          id = parseFloat(id);
        }
      }
      if (rowUniqueId === id) {
        dataRow = row;
        break;
      }
    }
    return dataRow;
  };
  BootstrapTable.prototype.removeByUniqueId = function (id) {
    var len = this.options.data.length,
      row = this.getRowByUniqueId(id);
    if (row) {
      this.options.data.splice(this.options.data.indexOf(row), 1);
    }
    if (len === this.options.data.length) {
      return;
    }
    this.initSearch();
    this.initPagination();
    this.initBody(true);
  };
  BootstrapTable.prototype.updateByUniqueId = function (params) {
    var that = this;
    var allParams = $.isArray(params) ? params : [params];
    $.each(allParams, function (i, params) {
      var rowId;
      if (!params.hasOwnProperty(&#39;id&#39;) || !params.hasOwnProperty(&#39;row&#39;)) {
        return;
      }
      rowId = $.inArray(that.getRowByUniqueId(params.id), that.options.data);
      if (rowId === -1) {
        return;
      }
      $.extend(that.options.data[rowId], params.row);
    });
    this.initSearch();
    this.initPagination();
    this.initSort();
    this.initBody(true);
  };
  BootstrapTable.prototype.insertRow = function (params) {
    if (!params.hasOwnProperty(&#39;index&#39;) || !params.hasOwnProperty(&#39;row&#39;)) {
      return;
    }
    this.data.splice(params.index, 0, params.row);
    this.initSearch();
    this.initPagination();
    this.initSort();
    this.initBody(true);
  };
  BootstrapTable.prototype.updateRow = function (params) {
    var that = this;
    var allParams = $.isArray(params) ? params : [params];
    $.each(allParams, function (i, params) {
      if (!params.hasOwnProperty(&#39;index&#39;) || !params.hasOwnProperty(&#39;row&#39;)) {
        return;
      }
      $.extend(that.options.data[params.index], params.row);
    });
    this.initSearch();
    this.initPagination();
    this.initSort();
    this.initBody(true);
  };
  BootstrapTable.prototype.initHiddenRows = function () {
    this.hiddenRows = [];
  };
  BootstrapTable.prototype.showRow = function (params) {
    this.toggleRow(params, true);
  };
  BootstrapTable.prototype.hideRow = function (params) {
    this.toggleRow(params, false);
  };
  BootstrapTable.prototype.toggleRow = function (params, visible) {
    var row, index;
    if (params.hasOwnProperty(&#39;index&#39;)) {
      row = this.getData()[params.index];
    } else if (params.hasOwnProperty(&#39;uniqueId&#39;)) {
      row = this.getRowByUniqueId(params.uniqueId);
    }
    if (!row) {
      return;
    }
    index = $.inArray(row, this.hiddenRows);
    if (!visible && index === -1) {
      this.hiddenRows.push(row);
    } else if (visible && index > -1) {
      this.hiddenRows.splice(index, 1);
    }
    this.initBody(true);
  };
  BootstrapTable.prototype.getHiddenRows = function (show) {
    var that = this,
      data = this.getData(),
      rows = [];
    $.each(data, function (i, row) {
      if ($.inArray(row, that.hiddenRows) > -1) {
        rows.push(row);
      }
    });
    this.hiddenRows = rows;
    return rows;
  };
  BootstrapTable.prototype.mergeCells = function (options) {
    var row = options.index,
      col = $.inArray(options.field, this.getVisibleFields()),
      rowspan = options.rowspan || 1,
      colspan = options.colspan || 1,
      i, j,
      $tr = this.$body.find(&#39;>tr&#39;),
      $td;
    if (this.options.detailView && !this.options.cardView) {
      col += 1;
    }
    $td = $tr.eq(row).find(&#39;>td&#39;).eq(col);
    if (row < 0 || col < 0 || row >= this.data.length) {
      return;
    }
    for (i = row; i < row + rowspan; i++) {
      for (j = col; j < col + colspan; j++) {
        $tr.eq(i).find(&#39;>td&#39;).eq(j).hide();
      }
    }
    $td.attr(&#39;rowspan&#39;, rowspan).attr(&#39;colspan&#39;, colspan).show();
  };
  BootstrapTable.prototype.updateCell = function (params) {
    if (!params.hasOwnProperty(&#39;index&#39;) ||
      !params.hasOwnProperty(&#39;field&#39;) ||
      !params.hasOwnProperty(&#39;value&#39;)) {
      return;
    }
    this.data[params.index][params.field] = params.value;
    if (params.reinit === false) {
      return;
    }
    this.initSort();
    this.initBody(true);
  };
  BootstrapTable.prototype.getOptions = function () {
    return this.options;
  };
  BootstrapTable.prototype.getSelections = function () {
    var that = this;
    return $.grep(this.options.data, function (row) {
      // fix #2424: from html with checkbox
      return row[that.header.stateField] === true;
    });
  };
  BootstrapTable.prototype.getAllSelections = function () {
    var that = this;
    return $.grep(this.options.data, function (row) {
      return row[that.header.stateField];
    });
  };
  BootstrapTable.prototype.checkAll = function () {
    this.checkAll_(true);
  };
  BootstrapTable.prototype.uncheckAll = function () {
    this.checkAll_(false);
  };
  BootstrapTable.prototype.checkInvert = function () {
    var that = this;
    var rows = that.$selectItem.filter(&#39;:enabled&#39;);
    var checked = rows.filter(&#39;:checked&#39;);
    rows.each(function () {
      $(this).prop(&#39;checked&#39;, !$(this).prop(&#39;checked&#39;));
    });
    that.updateRows();
    that.updateSelected();
    that.trigger(&#39;uncheck-some&#39;, checked);
    checked = that.getSelections();
    that.trigger(&#39;check-some&#39;, checked);
  };
  BootstrapTable.prototype.checkAll_ = function (checked) {
    var rows;
    if (!checked) {
      rows = this.getSelections();
    }
    this.$selectAll.add(this.$selectAll_).prop(&#39;checked&#39;, checked);
    this.$selectItem.filter(&#39;:enabled&#39;).prop(&#39;checked&#39;, checked);
    this.updateRows();
    if (checked) {
      rows = this.getSelections();
    }
    this.trigger(checked ? &#39;check-all&#39; : &#39;uncheck-all&#39;, rows);
  };
  BootstrapTable.prototype.check = function (index) {
    this.check_(true, index);
  };
  BootstrapTable.prototype.uncheck = function (index) {
    this.check_(false, index);
  };
  BootstrapTable.prototype.check_ = function (checked, index) {
    var $el = this.$selectItem.filter(sprintf(&#39;[data-index="%s"]&#39;, index)).prop(&#39;checked&#39;, checked);
    this.data[index][this.header.stateField] = checked;
    this.updateSelected();
    this.trigger(checked ? &#39;check&#39; : &#39;uncheck&#39;, this.data[index], $el);
  };
  BootstrapTable.prototype.checkBy = function (obj) {
    this.checkBy_(true, obj);
  };
  BootstrapTable.prototype.uncheckBy = function (obj) {
    this.checkBy_(false, obj);
  };
  BootstrapTable.prototype.checkBy_ = function (checked, obj) {
    if (!obj.hasOwnProperty(&#39;field&#39;) || !obj.hasOwnProperty(&#39;values&#39;)) {
      return;
    }
    var isTrigger = true;
    /*是否触发选中事件，还是静默处理*/
    if (obj.hasOwnProperty(&#39;isTrigger&#39;) && !obj[&#39;isTrigger&#39;]) {
      isTrigger = false
    }
    var that = this,
      rows = [];
    $.each(this.options.data, function (index, row) {
      if (!row.hasOwnProperty(obj.field)) {
        return false;
      }
      if ($.inArray(row[obj.field], obj.values) !== -1) {
        var $el = that.$selectItem.filter(&#39;:enabled&#39;)
          .filter(sprintf(&#39;[data-index="%s"]&#39;, index)).prop(&#39;checked&#39;, checked);
        row[that.header.stateField] = checked;
        rows.push(row);
        if (isTrigger) {
          that.trigger(checked ? &#39;check&#39; : &#39;uncheck&#39;, row, $el);
        }
      }
    });
    this.updateSelected();
    if (isTrigger) {
      this.trigger(checked ? &#39;check-some&#39; : &#39;uncheck-some&#39;, rows);
    }
  };
  BootstrapTable.prototype.destroy = function () {
    this.$el.insertBefore(this.$container);
    $(this.options.toolbar).insertBefore(this.$el);
    this.$container.next().remove();
    this.$container.remove();
    this.$el.html(this.$el_.html())
      .css(&#39;margin-top&#39;, &#39;0&#39;)
      .attr(&#39;class&#39;, this.$el_.attr(&#39;class&#39;) || &#39;&#39;); // reset the class
  };
  BootstrapTable.prototype.showLoading = function () {
    this.$tableLoading.show();
  };
  BootstrapTable.prototype.hideLoading = function () {
    this.$tableLoading.hide();
  };
  BootstrapTable.prototype.togglePagination = function () {
    this.options.pagination = !this.options.pagination;
    var button = this.$toolbar.find(&#39;button[name="paginationSwitch"] i&#39;);
    if (this.options.pagination) {
      button.attr("class", this.options.iconsPrefix + " " + this.options.icons.paginationSwitchDown);
    } else {
      button.attr("class", this.options.iconsPrefix + " " + this.options.icons.paginationSwitchUp);
    }
    this.updatePagination();
  };
  BootstrapTable.prototype.refresh = function (params) {
    if (params && params.url) {
      this.options.url = params.url;
    }
    if (params && params.pageNumber) {
      this.options.pageNumber = params.pageNumber;
    }
    if (params && params.pageSize) {
      this.options.pageSize = params.pageSize;
    }
    this.initServer(params && params.silent,
      params && params.query, params && params.url);
    this.trigger(&#39;refresh&#39;, params);
  };
  BootstrapTable.prototype.resetWidth = function () {
    if (this.options.showHeader && this.options.height) {
      this.fitHeader();
    }
    if (this.options.showFooter) {
      this.fitFooter();
    }
  };
  BootstrapTable.prototype.showColumn = function (field) {
    this.toggleColumn(getFieldIndex(this.columns, field), true, true);
  };
  BootstrapTable.prototype.hideColumn = function (field) {
    this.toggleColumn(getFieldIndex(this.columns, field), false, true);
  };
  BootstrapTable.prototype.getHiddenColumns = function () {
    return $.grep(this.columns, function (column) {
      return !column.visible;
    });
  };
  BootstrapTable.prototype.getVisibleColumns = function () {
    return $.grep(this.columns, function (column) {
      return column.visible;
    });
  };
  BootstrapTable.prototype.toggleAllColumns = function (visible) {
    $.each(this.columns, function (i, column) {
      this.columns[i].visible = visible;
    });
    this.initHeader();
    this.initSearch();
    this.initPagination();
    this.initBody();
    if (this.options.showColumns) {
      var $items = this.$toolbar.find(&#39;.keep-open input&#39;).prop(&#39;disabled&#39;, false);
      if ($items.filter(&#39;:checked&#39;).length <= this.options.minimumCountColumns) {
        $items.filter(&#39;:checked&#39;).prop(&#39;disabled&#39;, true);
      }
    }
  };
  BootstrapTable.prototype.showAllColumns = function () {
    this.toggleAllColumns(true);
  };
  BootstrapTable.prototype.hideAllColumns = function () {
    this.toggleAllColumns(false);
  };
  BootstrapTable.prototype.filterBy = function (columns) {
    this.filterColumns = $.isEmptyObject(columns) ? {} : columns;
    this.options.pageNumber = 1;
    this.initSearch();
    this.updatePagination();
  };
  BootstrapTable.prototype.scrollTo = function (value) {
    if (typeof value === &#39;string&#39;) {
      value = value === &#39;bottom&#39; ? this.$tableBody[0].scrollHeight : 0;
    }
    if (typeof value === &#39;number&#39;) {
      this.$tableBody.scrollTop(value);
    }
    if (typeof value === &#39;undefined&#39;) {
      return this.$tableBody.scrollTop();
    }
  };
  BootstrapTable.prototype.getScrollPosition = function () {
    return this.scrollTo();
  };
  BootstrapTable.prototype.selectPage = function (page) {
    if (page > 0 && page <= this.options.totalPages) {
      this.options.pageNumber = page;
      this.updatePagination();
    }
  };
  BootstrapTable.prototype.prevPage = function () {
    if (this.options.pageNumber > 1) {
      this.options.pageNumber--;
      this.updatePagination();
    }
  };
  BootstrapTable.prototype.nextPage = function () {
    if (this.options.pageNumber < this.options.totalPages) {
      this.options.pageNumber++;
      this.updatePagination();
    }
  };
  BootstrapTable.prototype.toggleView = function () {
    this.options.cardView = !this.options.cardView;
    this.initHeader();
    // Fixed remove toolbar when click cardView button.
    //that.initToolbar();
    this.initBody();
    this.trigger(&#39;toggle&#39;, this.options.cardView);
  };
  BootstrapTable.prototype.refreshOptions = function (options) {
    //If the objects are equivalent then avoid the call of destroy / init methods
    if (compareObjects(this.options, options, true)) {
      return;
    }
    this.options = $.extend(this.options, options);
    this.trigger(&#39;refresh-options&#39;, this.options);
    this.destroy();
    this.init();
  };
  BootstrapTable.prototype.resetSearch = function (text) {
    var $search = this.$toolbar.find(&#39;.search input&#39;);
    $search.val(text || &#39;&#39;);
    this.onSearch({ currentTarget: $search });
  };
  BootstrapTable.prototype.expandRow_ = function (expand, index) {
    var $tr = this.$body.find(sprintf(&#39;> tr[data-index="%s"]&#39;, index));
    if ($tr.next().is(&#39;tr.detail-view&#39;) === (expand ? false : true)) {
      $tr.find(&#39;> td > .detail-icon&#39;).click();
    }
  };
  BootstrapTable.prototype.expandRow = function (index) {
    this.expandRow_(true, index);
  };
  BootstrapTable.prototype.collapseRow = function (index) {
    this.expandRow_(false, index);
  };
  BootstrapTable.prototype.expandAllRows = function (isSubTable) {
    if (isSubTable) {
      var $tr = this.$body.find(sprintf(&#39;> tr[data-index="%s"]&#39;, 0)),
        that = this,
        detailIcon = null,
        executeInterval = false,
        idInterval = -1;
      if (!$tr.next().is(&#39;tr.detail-view&#39;)) {
        $tr.find(&#39;> td > .detail-icon&#39;).click();
        executeInterval = true;
      } else if (!$tr.next().next().is(&#39;tr.detail-view&#39;)) {
        $tr.next().find(".detail-icon").click();
        executeInterval = true;
      }
      if (executeInterval) {
        try {
          idInterval = setInterval(function () {
            detailIcon = that.$body.find("tr.detail-view").last().find(".detail-icon");
            if (detailIcon.length > 0) {
              detailIcon.click();
            } else {
              clearInterval(idInterval);
            }
          }, 1);
        } catch (ex) {
          clearInterval(idInterval);
        }
      }
    } else {
      var trs = this.$body.children();
      for (var i = 0; i < trs.length; i++) {
        this.expandRow_(true, $(trs[i]).data("index"));
      }
    }
  };
  BootstrapTable.prototype.collapseAllRows = function (isSubTable) {
    if (isSubTable) {
      this.expandRow_(false, 0);
    } else {
      var trs = this.$body.children();
      for (var i = 0; i < trs.length; i++) {
        this.expandRow_(false, $(trs[i]).data("index"));
      }
    }
  };
  BootstrapTable.prototype.updateFormatText = function (name, text) {
    if (this.options[sprintf(&#39;format%s&#39;, name)]) {
      if (typeof text === &#39;string&#39;) {
        this.options[sprintf(&#39;format%s&#39;, name)] = function () {
          return text;
        };
      } else if (typeof text === &#39;function&#39;) {
        this.options[sprintf(&#39;format%s&#39;, name)] = text;
      }
    }
    this.initToolbar();
    this.initPagination();
    this.initBody();
  };
  // BOOTSTRAP TABLE PLUGIN DEFINITION
  // =======================
  var allowedMethods = [
    &#39;getOptions&#39;,
    &#39;getSelections&#39;, &#39;getAllSelections&#39;, &#39;getData&#39;,
    &#39;load&#39;, &#39;append&#39;, &#39;prepend&#39;, &#39;remove&#39;, &#39;removeAll&#39;,
    &#39;insertRow&#39;, &#39;updateRow&#39;, &#39;updateCell&#39;, &#39;updateByUniqueId&#39;, &#39;removeByUniqueId&#39;,
    &#39;getRowByUniqueId&#39;, &#39;showRow&#39;, &#39;hideRow&#39;, &#39;getHiddenRows&#39;,
    &#39;mergeCells&#39;,
    &#39;checkAll&#39;, &#39;uncheckAll&#39;, &#39;checkInvert&#39;,
    &#39;check&#39;, &#39;uncheck&#39;,
    &#39;checkBy&#39;, &#39;uncheckBy&#39;,
    &#39;refresh&#39;,
    &#39;resetView&#39;,
    &#39;resetWidth&#39;,
    &#39;destroy&#39;,
    &#39;showLoading&#39;, &#39;hideLoading&#39;,
    &#39;showColumn&#39;, &#39;hideColumn&#39;, &#39;getHiddenColumns&#39;, &#39;getVisibleColumns&#39;,
    &#39;showAllColumns&#39;, &#39;hideAllColumns&#39;,
    &#39;filterBy&#39;,
    &#39;scrollTo&#39;,
    &#39;getScrollPosition&#39;,
    &#39;selectPage&#39;, &#39;prevPage&#39;, &#39;nextPage&#39;,
    &#39;togglePagination&#39;,
    &#39;toggleView&#39;,
    &#39;refreshOptions&#39;,
    &#39;resetSearch&#39;,
    &#39;expandRow&#39;, &#39;collapseRow&#39;, &#39;expandAllRows&#39;, &#39;collapseAllRows&#39;,
    &#39;updateFormatText&#39;
  ];
  $.fn.bootstrapTable = function (option) {
    var value,
      args = Array.prototype.slice.call(arguments, 1);
    this.each(function () {
      var $this = $(this),
        data = $this.data(&#39;bootstrap.table&#39;),
        options = $.extend({}, BootstrapTable.DEFAULTS, $this.data(),
          typeof option === &#39;object&#39; && option);
      if (typeof option === &#39;string&#39;) {
        if ($.inArray(option, allowedMethods) < 0) {
          throw new Error("Unknown method: " + option);
        }
        if (!data) {
          return;
        }
        value = data[option].apply(data, args);
        if (option === &#39;destroy&#39;) {
          $this.removeData(&#39;bootstrap.table&#39;);
        }
      }
      if (!data) {
        $this.data(&#39;bootstrap.table&#39;, (data = new BootstrapTable(this, options)));
      }
    });
    return typeof value === &#39;undefined&#39; ? this : value;
  };
  $.fn.bootstrapTable.Constructor = BootstrapTable;
  $.fn.bootstrapTable.defaults = BootstrapTable.DEFAULTS;
  $.fn.bootstrapTable.columnDefaults = BootstrapTable.COLUMN_DEFAULTS;
  $.fn.bootstrapTable.locales = BootstrapTable.LOCALES;
  $.fn.bootstrapTable.methods = allowedMethods;
  $.fn.bootstrapTable.utils = {
    sprintf: sprintf,
    getFieldIndex: getFieldIndex,
    compareObjects: compareObjects,
    calculateObjectValue: calculateObjectValue,
    getItemField: getItemField,
    objectKeys: objectKeys,
    isIEBrowser: isIEBrowser
  };
  // BOOTSTRAP TABLE INIT
  // =======================
  $(function () {
    $(&#39;[data-toggle="table"]&#39;).bootstrapTable();
  });
})(jQuery);

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

Configure vuex in mpvue and persist it to local Storage Graphic tutorial analysis

nodejs implementation Simple web server function example

project created by vue-cli, how to configure multiple pages

The above is the detailed content of How to implement table support height percentage in bootstrap. For more information, please follow other related articles on the PHP Chinese website!