Heim Web-Frontend js-Tutorial So stellen Sie die Bootstrap-Tabelle auf den Höhenprozentsatz ein

So stellen Sie die Bootstrap-Tabelle auf den Höhenprozentsatz ein

Mar 17, 2018 pm 01:22 PM
bootstrap table 高度

Dieses Mal zeige ich Ihnen, wie Sie die Bootstrap-Tabelle auf den Höhenprozentsatz einstellen und welche Vorsichtsmaßnahmen zum Einstellen der Bootstrap-Tabelle auf den Höhenprozentsatz gelten. Das Folgende ist ein praktischer Fall, schauen wir uns das an.

Ändern Sie die BootstrapTable.prototype.resetView-Methode, um die Höhenprozentsatzdefinition zu unterstützen und an Bildschirme unterschiedlicher Höhe anzupassen

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');
  };
Nach dem Login kopieren

Der vollständige Code der geänderten Bootstrap-Table.js:

/**
 * @author zhixin wen <wenzhixin2010@gmail.com>
 * version: 1.11.1
 * https://github.com/wenzhixin/bootstrap-table/
 */
(function ($) {
  'use strict';
  // TOOLS DEFINITION
  // ======================
  var cachedWidth = null;
  // it only does '%s', and return '' 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 === 'undefined') {
        flag = false;
        return '';
      }
      return arg;
    });
    return flag ? str : '';
  };
  var getPropertyFromOther = function (list, from, to, value) {
    var result = '';
    $.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/>').addClass('fixed-table-scroll-inner'),
        outer = $('<p/>').addClass('fixed-table-scroll-outer'),
        w1, w2;
      outer.append(inner);
      $('body').append(outer);
      w1 = inner[0].offsetWidth;
      outer.css('overflow', 'scroll');
      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 === 'string') {
      // support obj.func1.func2
      var names = name.split('.');
      if (names.length > 1) {
        func = window;
        $.each(names, function (i, f) {
          func = func[f];
        });
      } else {
        func = window[name];
      }
    }
    if (typeof func === 'object') {
      return func;
    }
    if (typeof func === 'function') {
      return func.apply(self, args || []);
    }
    if (!func && typeof name === 'string' && 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 = '';
    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 === 'string') {
      return text
        .replace(/&/g, '&')
        .replace(/</g, &#39;<&#39;)
        .replace(/>/g, '>')
        .replace(/"/g, '"')
        .replace(/'/g, ''')
        .replace(/`/g, '`');
    }
    return text;
  };
  var getRealDataAttr = function (dataAttr) {
    for (var attr in dataAttr) {
      var auxAttr = attr.split(/(?=[A-Z])/).join('-').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 !== 'string' || item.hasOwnProperty(field)) {
      return escape ? escapeHTML(item[field]) : item[field];
    }
    var props = field.split('.');
    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('toString'),
          dontEnums = [
            'toString',
            'toLocaleString',
            'valueOf',
            'hasOwnProperty',
            'isPrototypeOf',
            'propertyIsEnumerable',
            'constructor'
          ],
          dontEnumsLength = dontEnums.length;
        return function (obj) {
          if (typeof obj !== 'object' && (typeof obj !== 'function' || obj === null)) {
            throw new TypeError('Object.keys called on non-object');
          }
          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">',
      '<p class="fixed-table-toolbar"></p>',
      this.options.paginationVAlign === 'top' || this.options.paginationVAlign === 'both' ?
        '<p class="fixed-table-pagination" style="clear: both;"></p>' :
        '',
      '<p class="fixed-table-container">',
      '<p class="fixed-table-header"><table></table></p>',
      '<p class="fixed-table-body">',
      '<p class="fixed-table-loading">',
      this.options.formatLoadingMessage(),
      '</p>',
      '</p>',
      '<p class="fixed-table-footer"><table><tr></tr></table></p>',
      this.options.paginationVAlign === 'bottom' || this.options.paginationVAlign === 'both' ?
        '<p class="fixed-table-pagination"></p>' :
        '',
      '</p>',
      '</p>'
    ].join(''));
    this.$container.insertAfter(this.$el);
    this.$tableContainer = this.$container.find('.fixed-table-container');
    this.$tableHeader = this.$container.find('.fixed-table-header');
    this.$tableBody = this.$container.find('.fixed-table-body');
    this.$tableLoading = this.$container.find('.fixed-table-loading');
    this.$tableFooter = this.$container.find('.fixed-table-footer');
    this.$toolbar = this.$container.find('.fixed-table-toolbar');
    this.$pagination = this.$container.find('.fixed-table-pagination');
    this.$tableBody.append(this.$el);
    this.$container.after('<p class="clearfix"></p>');
    this.$el.addClass(this.options.classes);
    if (this.options.striped) {
      this.$el.addClass('table-striped');
    }
    if ($.inArray('table-no-bordered', this.options.classes.split(' ')) !== -1) {
      this.$tableContainer.addClass('table-no-bordered');
    }
  };
  BootstrapTable.prototype.initTable = function () {
    var that = this,
      columns = [],
      data = [];
    this.$header = this.$el.find('>thead');
    if (!this.$header.length) {
      this.$header = $('<thead></thead>').appendTo(this.$el);
    }
    this.$header.find('tr').each(function () {
      var column = [];
      $(this).find('th').each(function () {
        // Fix #2014 - getFieldIndex and elsewhere assume this is string, causes issues if not
        if (typeof $(this).data('field') !== 'undefined') {
          $(this).data('field', $(this).data('field') + '');
        }
        column.push($.extend({}, {
          title: $(this).html(),
          'class': $(this).attr('class'),
          titleTooltip: $(this).attr('title'),
          rowspan: $(this).attr('rowspan') ? +$(this).attr('rowspan') : undefined,
          colspan: $(this).attr('colspan') ? +$(this).attr('colspan') : 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 !== 'undefined') {
          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('>tbody>tr').each(function (y) {
      var row = {};
      // save tr's id, class and data-* attributes
      row._id = $(this).attr('id');
      row._class = $(this).attr('class');
      row._data = getRealDataAttr($(this).data());
      $(this).find('>td').each(function (x) {
        var $this = $(this),
          cspan = +$this.attr('colspan') || 1,
          rspan = +$this.attr('rowspan') || 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's id, class and data-* attributes
        row['_' + field + '_id'] = $(this).attr('id');
        row['_' + field + '_class'] = $(this).attr('class');
        row['_' + field + '_rowspan'] = $(this).attr('rowspan');
        row['_' + field + '_colspan'] = $(this).attr('colspan');
        row['_' + field + '_title'] = $(this).attr('title');
        row['_' + field + '_data'] = 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('<tr>');
      if (i === 0 && !that.options.cardView && that.options.detailView) {
        html.push(sprintf('<th class="detail" rowspan="%s"><p class="fht-cell"></p></th>',
          that.options.columns.length));
      }
      $.each(columns, function (j, column) {
        var text = '',
          halign = '', // header align style
          align = '', // body align style
          style = '',
          class_ = sprintf(' class="%s"', column['class']),
          order = that.options.sortOrder || column.order,
          unitWidth = 'px',
          width = column.width;
        if (column.width !== undefined && (!that.options.cardView)) {
          if (typeof column.width === 'string') {
            if (column.width.indexOf('%') !== -1) {
              unitWidth = '%';
            }
          }
        }
        if (column.width && typeof column.width === 'string') {
          width = column.width.replace('%', '').replace('px', '');
        }
        halign = sprintf('text-align: %s; ', column.halign ? column.halign : column.align);
        align = sprintf('text-align: %s; ', column.align);
        style = sprintf('vertical-align: %s; ', column.valign);
        style += sprintf('width: %s; ', (column.checkbox || column.radio) && !width ?
          '36px' : (width ? width + unitWidth : undefined));
        if (typeof column.fieldIndex !== 'undefined') {
          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('<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;>');
        html.push(sprintf('<p class="th-inner %s">', that.options.sortable && column.sortable ?
          'sortable both' : ''));
        text = that.options.escape ? escapeHTML(column.title) : column.title;
        if (column.checkbox) {
          if (!that.options.singleSelect && that.options.checkboxHeader) {
            text = '<input name="btSelectAll" type="checkbox" />';
          }
          that.header.stateField = column.field;
        }
        if (column.radio) {
          text = '';
          that.header.stateField = column.field;
          that.options.singleSelect = true;
        }
        html.push(text);
        html.push('</p>');
        html.push('<p class="fht-cell"></p>');
        html.push('</p>');
        html.push('</th>');
      });
      html.push('</tr>');
    });
    this.$header.html(html.join(''));
    this.$header.find('th[data-field]').each(function (i) {
      $(this).data(visibleColumns[$(this).data('field')]);
    });
    this.$container.off('click', '.th-inner').on('click', '.th-inner', function (event) {
      var target = $(this);
      if (that.options.detailView) {
        if (target.closest('.bootstrap-table')[0] !== that.$container[0])
          return false;
      }
      if (that.options.sortable && target.parent().data().sortable) {
        that.onSort(event);
      }
    });
    this.$header.children().children().off('keypress').on('keypress', 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('resize.bootstrap-table');
    if (!this.options.showHeader || this.options.cardView) {
      this.$header.hide();
      this.$tableHeader.hide();
      this.$tableLoading.css('top', 0);
    } else {
      this.$header.show();
      this.$tableHeader.show();
      this.$tableLoading.css('top', this.$header.outerHeight() + 1);
      // Assign the correct sortable arrow
      this.getCaret();
      $(window).on('resize.bootstrap-table', $.proxy(this.resetWidth, this));
    }
    this.$selectAll = this.$header.find('[name="btSelectAll"]');
    this.$selectAll.off('click').on('click', function () {
      var checked = $(this).prop('checked');
      that[checked ? 'checkAll' : 'uncheckAll']();
      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 === 'append') {
      this.data = this.data.concat(data);
    } else if (type === 'prepend') {
      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 === 'append') {
      this.options.data = this.options.data.concat(data);
    } else if (type === 'prepend') {
      this.options.data = [].concat(data).concat(this.options.data);
    } else {
      this.options.data = this.data;
    }
    if (this.options.sidePagination === 'server') {
      return;
    }
    this.initSort();
  };
  BootstrapTable.prototype.initSort = function () {
    var that = this,
      name = this.options.sortName,
      order = this.options.sortOrder === 'desc' ? -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('_position')) 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 = '';
        }
        if (bb === undefined || bb === null) {
          bb = '';
        }
        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>', this.options.toolbarAlign))
        .appendTo(this.$toolbar)
        .append($(this.options.toolbar));
    }
    // showColumns, showToggle, showRefresh
    html = [sprintf('<p class="columns columns-%s btn-group pull-%s">',
      this.options.buttonsAlign, this.options.buttonsAlign)];
    if (typeof this.options.icons === 'string') {
      this.options.icons = calculateObjectValue(null, this.options.icons);
    }
    if (this.options.showPaginationSwitch) {
      html.push(sprintf('<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">',
        this.options.formatPaginationSwitch()),
        sprintf('<i class="%s %s"></i>', this.options.iconsPrefix, this.options.icons.paginationSwitchDown),
        '</button>');
    }
    if (this.options.showRefresh) {
      html.push(sprintf('<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">',
        this.options.formatRefresh()),
        sprintf('<i class="%s %s"></i>', this.options.iconsPrefix, this.options.icons.refresh),
        '</button>');
    }
    if (this.options.showToggle) {
      html.push(sprintf('<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">',
        this.options.formatToggle()),
        sprintf('<i class="%s %s"></i>', this.options.iconsPrefix, this.options.icons.toggle),
        '</button>');
    }
    if (this.options.showColumns) {
      html.push(sprintf('<p class="keep-open btn-group" title="%s">',
        this.options.formatColumns()),
        '<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">',
        sprintf('<i class="%s %s"></i>', this.options.iconsPrefix, this.options.icons.columns),
        ' <span class="caret"></span>',
        '</button>',
        '<ul class="dropdown-menu" role="menu">');
      $.each(this.columns, function (i, column) {
        if (column.radio || column.checkbox) {
          return;
        }
        if (that.options.cardView && !column.cardVisible) {
          return;
        }
        var checked = column.visible ? ' checked="checked"' : '';
        if (column.switchable) {
          html.push(sprintf('<li role="menuitem">' +
            '<label><input type="checkbox" data-field="%s" value="%s"%s> %s</label>' +
            '</li>', column.field, i, checked, column.title));
          switchableCount++;
        }
      });
      html.push('</ul>',
        '</p>');
    }
    html.push('</p>');
    // Fix #188: this.showToolbar is for extensions
    if (this.showToolbar || html.length > 2) {
      this.$toolbar.append(html.join(''));
    }
    if (this.options.showPaginationSwitch) {
      this.$toolbar.find('button[name="paginationSwitch"]')
        .off('click').on('click', $.proxy(this.togglePagination, this));
    }
    if (this.options.showRefresh) {
      this.$toolbar.find('button[name="refresh"]')
        .off('click').on('click', $.proxy(this.refresh, this));
    }
    if (this.options.showToggle) {
      this.$toolbar.find('button[name="toggle"]')
        .off('click').on('click', function () {
          that.toggleView();
        });
    }
    if (this.options.showColumns) {
      $keepOpen = this.$toolbar.find('.keep-open');
      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">',
        sprintf('<input class="form-control&#39; +
          sprintf(&#39; input-%s&#39;, this.options.iconSize) +
          &#39;" type="text" placeholder="%s">',
          this.options.formatSearch()),
        '</p>');
      this.$toolbar.append(html.join(''));
      $search = this.$toolbar.find('.search input');
      $search.off('keyup drop blur').on('keyup drop blur', function (event) {
        if (that.options.searchOnEnterKey && event.keyCode !== 13) {
          return;
        }
        if ($.inArray(event.keyCode, [37, 38, 39, 40]) > -1) {
          return;
        }
        clearTimeout(timeoutId); // doesn't matter if it's 0
        timeoutId = setTimeout(function () {
          that.onSearch(event);
        }, that.options.searchTimeOut);
      });
      if (isIEBrowser()) {
        $search.off('mouseup').on('mouseup', function (event) {
          clearTimeout(timeoutId); // doesn't matter if it'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('search', text);
  };
  BootstrapTable.prototype.initSearch = function () {
    var that = this;
    if (this.options.sidePagination !== 'server') {
      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(
      '<p class="pull-&#39; + this.options.paginationDetailHAlign + &#39; pagination-detail">',
      '<span class="pagination-info">',
      this.options.onlyInfoPagination ? this.options.formatDetailPagination(this.options.totalRows) :
        this.options.formatShowingRows(this.pageFrom, this.pageTo, this.options.totalRows),
      '</span>');
    if (!this.options.onlyInfoPagination) {
      html.push('<span class="page-list">');
      var pageNumber = [
        sprintf('<span class="btn-group %s">',
          this.options.paginationVAlign === 'top' || this.options.paginationVAlign === 'both' ?
            'dropdown' : 'dropup'),
        '<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">',
        '<span class="page-size">',
        $allSelected ? this.options.formatAllRows() : this.options.pageSize,
        '</span>',
        ' <span class="caret"></span>',
        '</button>',
        '<ul class="dropdown-menu" role="menu">'
      ];
      if (typeof this.options.pageList === 'string') {
        var list = this.options.pageList.replace('[', '').replace(']', '')
          .replace(/ /g, '').split(',');
        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>', active, page));
        }
      });
      pageNumber.push('</ul></span>');
      html.push(this.options.formatRecordsPerPage(pageNumber.join('')));
      html.push('</span>');
      html.push('</p>',
        '<p class="pull-&#39; + this.options.paginationHAlign + &#39; pagination">',
        '<ul class="pagination&#39; + sprintf(&#39; pagination-%s&#39;, this.options.iconSize) + &#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" >' + this.options.paginationPreText + '</a></li>');
      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('<li class="page-first&#39; + (1 === this.options.pageNumber ? &#39; active&#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" >', 1, '</a>',
            '</li>');
          from++;
        }
        if (this.options.pageNumber >= 4) {
          if (this.options.pageNumber == 4 || this.totalPages == 6 || this.totalPages == 7) {
            from--;
          } else {
            html.push('<li class="page-first-separator disabled">',
              '<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>',
              '</li>');
          }
          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;">',
          '<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" >', i, '</a>',
          '</li>');
      }
      if (this.totalPages >= 8) {
        if (this.options.pageNumber <= (this.totalPages - 4)) {
          html.push(&#39;<li class="page-last-separator disabled">',
            '<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>',
            '</li>');
        }
      }
      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;">',
            '<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" >', this.totalPages, '</a>',
            '</li>');
        }
      }
      html.push(
        '<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" >' + this.options.paginationNextText + '</a></li>',
        '</ul>',
        '</p>');
    }
    this.$pagination.html(html.join(''));
    if (!this.options.onlyInfoPagination) {
      $pageList = this.$pagination.find('.page-list a');
      $first = this.$pagination.find('.page-first');
      $pre = this.$pagination.find('.page-pre');
      $next = this.$pagination.find('.page-next');
      $last = this.$pagination.find('.page-last');
      $number = this.$pagination.find('.page-number');
      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_ = '',
      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 + ': ' + style.css[key]);
      }
    }
    attributes = calculateObjectValue(this.options,
      this.options.rowAttributes, [item, i], attributes);
    if (attributes) {
      for (key in attributes) {
        htmlAttributes.push(sprintf('%s="%s"', key, escapeHTML(attributes[key])));
      }
    }
    if (item._data && !$.isEmptyObject(item._data)) {
      $.each(item._data, function (k, v) {
        // ignore data-index
        if (k === 'index') {
          return;
        }
        data_ += sprintf(' data-%s="%s"', k, v);
      });
    }
    html.push('<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;>'
    );
    if (this.options.cardView) {
      html.push(sprintf('<td colspan="%s"><p class="card-views">', this.header.fields.length));
    }
    if (!this.options.cardView && this.options.detailView) {
      html.push('<td>',
        '<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" >',
        sprintf('<i class="%s %s"></i>', this.options.iconsPrefix, this.options.icons.detailOpen),
        '</a>',
        '</td>');
    }
    $.each(this.header.fields, function (j, field) {
      var text = '',
        value_ = getItemField(item, field, that.options.escape),
        value = '',
        type = '',
        cellStyle = {},
        id_ = '',
        class_ = that.header.classes[j],
        data_ = '',
        rowspan_ = '',
        colspan_ = '',
        title_ = '',
        column = that.columns[j];
      if (that.fromHtml && typeof value_ === 'undefined') {
        return;
      }
      if (!column.visible) {
        return;
      }
      if (that.options.cardView && (!column.cardVisible)) {
        return;
      }
      if (column.escape) {
        value_ = escapeHTML(value_);
      }
      style = sprintf('style="%s"', csses.concat(that.header.styles[j]).join('; '));
      // handle td's id and class
      if (item['_' + field + '_id']) {
        id_ = sprintf(' id="%s"', item['_' + field + '_id']);
      }
      if (item['_' + field + '_class']) {
        class_ = sprintf(' class="%s"', item['_' + field + '_class']);
      }
      if (item['_' + field + '_rowspan']) {
        rowspan_ = sprintf(' rowspan="%s"', item['_' + field + '_rowspan']);
      }
      if (item['_' + field + '_colspan']) {
        colspan_ = sprintf(' colspan="%s"', item['_' + field + '_colspan']);
      }
      if (item['_' + field + '_title']) {
        title_ = sprintf(' title="%s"', item['_' + field + '_title']);
      }
      cellStyle = calculateObjectValue(that.header,
        that.header.cellStyles[j], [value_, item, i, field], cellStyle);
      if (cellStyle.classes) {
        class_ = sprintf(' class="%s"', cellStyle.classes);
      }
      if (cellStyle.css) {
        var csses_ = [];
        for (var key in cellStyle.css) {
          csses_.push(key + ': ' + cellStyle.css[key]);
        }
        style = sprintf('style="%s"', csses_.concat(that.header.styles[j]).join('; '));
      }
      value = calculateObjectValue(column,
        that.header.formatters[j], [value_, item, i], value_);
      if (item['_' + field + '_data'] && !$.isEmptyObject(item['_' + field + '_data'])) {
        $.each(item['_' + field + '_data'], function (k, v) {
          // ignore data-index
          if (k === 'index') {
            return;
          }
          data_ += sprintf(' data-%s="%s"', k, v);
        });
      }
      if (column.checkbox || column.radio) {
        type = column.checkbox ? 'checkbox' : type;
        type = column.radio ? 'radio' : type;
        text = [sprintf(that.options.cardView ?
          '<p class="card-view %s">' : '<td class="bs-checkbox %s">', column['class'] || ''),
        '<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; />',
        that.header.formatters[j] && typeof value === 'string' ? value : '',
        that.options.cardView ? '</p>' : '</td>'
        ].join('');
        item[that.header.stateField] = value === true || (value && value.checked);
      } else {
        value = typeof value === 'undefined' || value === null ?
          that.options.undefinedText : value;
        text = that.options.cardView ? ['<p class="card-view">',
          that.options.showHeader ? sprintf('<span class="title" %s>%s</span>', style,
            getPropertyFromOther(that.columns, 'field', 'title', field)) : '',
          sprintf('<span class="value">%s</span>', value),
          '</p>'
        ].join('') : [sprintf('<td%s %s %s %s %s %s %s>',
          id_, class_, style, data_, rowspan_, colspan_, title_),
          value,
          '</td>'
        ].join('');
        // Hide empty data on Card view when smartDisplay is set to true.
        if (that.options.cardView && that.options.smartDisplay && value === '') {
          // Should set a placeholder for event binding correct fieldIndex
          text = '<p class="card-view"></p>';
        }
      }
      html.push(text);
    });
    if (this.options.cardView) {
      html.push('</p></td>');
    }
    html.push('</tr>');
    return html.join(' ');
  };
  BootstrapTable.prototype.initBody = function (fixedScroll) {
    var that = this,
      html = [],
      data = this.getData();
    this.trigger('pre-body', data);
    this.$body = this.$el.find('>tbody');
    if (!this.$body.length) {
      this.$body = $('<tbody></tbody>').appendTo(this.$el);
    }
    //Fix #389 Bootstrap-table-flatJSON is not working
    if (!this.options.pagination || this.options.sidePagination === 'server') {
      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">' +
        sprintf('<td colspan="%s">%s</td>',
          this.$header.find('th').length,
          this.options.formatNoMatches()) +
        '</tr>');
    }
    this.$body.html(trFragments);
    if (!fixedScroll) {
      this.scrollTo(0);
    }
    // click to select by column
    this.$body.find('> tr[data-index] > td').off('click dblclick').on('click dblclick', function (e) {
      var $td = $(this),
        $tr = $td.parent(),
        item = that.data[$tr.data('index')],
        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('.detail-icon').length) {
        return;
      }
      that.trigger(e.type === 'click' ? 'click-cell' : 'dbl-click-cell', field, value, item, $td);
      that.trigger(e.type === 'click' ? 'click-row' : 'dbl-click-row', item, $tr, field);
      // if click to select - then trigger the checkbox/radio click
      if (e.type === 'click' && that.options.clickToSelect && column.clickToSelect) {
        var $selectItem = $tr.find(sprintf('[name="%s"]', that.options.selectItemName));
        if ($selectItem.length) {
          $selectItem[0].click(); // #144: .trigger('click') bug
        }
      }
    });
    this.$body.find('> tr[data-index] > td > .detail-icon').off('click').on('click', function () {
      var $this = $(this),
        $tr = $this.parent().parent(),
        index = $tr.data('index'),
        row = data[index]; // Fix #980 Detail view, when searching, returns wrong row
      // remove and update
      if ($tr.next().is('tr.detail-view')) {
        $this.find('i').attr('class', sprintf('%s %s', that.options.iconsPrefix, that.options.icons.detailOpen));
        that.trigger('collapse-row', index, row);
        $tr.next().remove();
      } else {
        $this.find('i').attr('class', sprintf('%s %s', that.options.iconsPrefix, that.options.icons.detailClose));
        $tr.after(sprintf('<tr class="detail-view"><td colspan="%s"></td></tr>', $tr.find('td').length));
        var $element = $tr.next().find('td');
        var content = calculateObjectValue(that.options, that.options.detailFormatter, [index, row, $element], '');
        if ($element.length === 1) {
          $element.append(content);
        }
        that.trigger('expand-row', index, row, $element);
      }
      that.resetView();
      return false;
    });
    this.$selectItem = this.$body.find(sprintf('[name="%s"]', this.options.selectItemName));
    this.$selectItem.off('click').on('click', function (event) {
      event.stopImmediatePropagation();
      var $this = $(this),
        checked = $this.prop('checked'),
        row = that.data[$this.data('index')];
      if (that.options.maintainSelected && $(this).is(':radio')) {
        $.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('index')][that.header.stateField] = false;
        });
        that.$selectItem.filter(':checked').not(this).prop('checked', false);
      }
      that.updateSelected();
      that.trigger(checked ? 'check' : 'uncheck', row, $this);
    });
    $.each(this.header.events, function (i, events) {
      if (!events) {
        return;
      }
      // fix bug, if events is defined with namespace
      if (typeof events === 'string') {
        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('>tr:not(.no-records-found)').each(function () {
          var $tr = $(this),
            $td = $tr.find(that.options.cardView ? '.card-view' : 'td').eq(fieldIndex),
            index = key.indexOf(' '),
            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('index'),
              row = that.data[index],
              value = row[field];
            func.apply(this, [e, value, row, index]);
          });
        });
      }
    });
    this.updateSelected();
    this.resetView();
    this.trigger('post-body', 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 === 'limit') {
      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 === 'application/json' && this.options.method === 'post' ?
        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('load-success', res);
        if (!silent) that.$tableLoading.hide();
      },
      error: function (res) {
        that.trigger('load-error', 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 !== '') {
        var $search = this.$toolbar.find('.search input');
        $search.val(this.options.searchText);
        this.onSearch({ currentTarget: $search });
      }
    }
  };
  BootstrapTable.prototype.getCaret = function () {
    var that = this;
    $.each(this.$header.find('th'), function (i, th) {
      $(th).find('.sortable').removeClass('desc asc').addClass($(th).data('field') === that.options.sortName ? that.options.sortOrder : 'both');
    });
  };
  BootstrapTable.prototype.updateSelected = function () {
    var checkAll = this.$selectItem.filter(':enabled').length &&
      this.$selectItem.filter(':enabled').length ===
      this.$selectItem.filter(':enabled').filter(':checked').length;
    this.$selectAll.add(this.$selectAll_).prop('checked', checkAll);
    this.$selectItem.each(function () {
      $(this).closest('tr')[$(this).prop('checked') ? 'addClass' : 'removeClass']('selected');
    });
  };
  BootstrapTable.prototype.updateRows = function () {
    var that = this;
    this.$selectItem.each(function () {
      that.data[$(this).data('index')][that.header.stateField] = $(this).prop('checked');
    });
  };
  BootstrapTable.prototype.resetRows = function () {
    var that = this;
    $.each(this.data, function (i, row) {
      that.$selectAll.prop('checked', false);
      that.$selectItem.prop('checked', 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 += '.bs.table';
    this.options[BootstrapTable.EVENTS[name]].apply(this.options, args);
    this.$el.trigger($.Event(name), args);
    this.options.onAll(name, args);
    this.$el.trigger($.Event('all.bs.table'), [name, args]);
  };
  BootstrapTable.prototype.resetHeader = function () {
    // fix #61: the hidden table reset header bug.
    // fix bug: get $el.css('width') error sometime (height = 500)
    clearTimeout(this.timeoutId_);
    this.timeoutId_ = setTimeout($.proxy(this.fitHeader, this), this.$el.is(':hidden') ? 100 : 0);
  };
  BootstrapTable.prototype.fitHeader = function () {
    var that = this,
      fixedBody,
      scrollWidth,
      focused,
      focusedTemp;
    if (that.$el.is(':hidden')) {
      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('margin-top', -this.$header.outerHeight());
    focused = $(':focus');
    if (focused.length > 0) {
      var $th = focused.parents('th');
      if ($th.length > 0) {
        var dataField = $th.attr('data-field');
        if (dataField !== undefined) {
          var $headerTh = this.$header.find("[data-field='" + dataField + "']");
          if ($headerTh.length > 0) {
            $headerTh.find(":input").addClass("focus-temp");
          }
        }
      }
    }
    this.$header_ = this.$header.clone(true, true);
    this.$selectAll_ = this.$header_.find('[name="btSelectAll"]');
    this.$tableHeader.css({
      'margin-right': scrollWidth
    }).find('table').css('width', this.$el.outerWidth())
      .html('').attr('class', this.$el.attr('class'))
      .append(this.$header_);
    focusedTemp = $('.focus-temp:visible:eq(0)');
    if (focusedTemp.length > 0) {
      focusedTemp.focus();
      this.$header.find('.focus-temp').removeClass('focus-temp');
    }
    // fix bug: $.data() is not working as expected after $.append()
    this.$header.find('th[data-field]').each(function (i) {
      that.$header_.find(sprintf('th[data-field="%s"]', $(this).data('field'))).data($(this).data());
    });
    var visibleFields = this.getVisibleFields(),
      $ths = this.$header_.find('th');
    this.$body.find('>tr:first-child:not(.no-records-found) > *').each(function (i) {
      var $this = $(this),
        index = i;
      if (that.options.detailView && !that.options.cardView) {
        if (i === 0) {
          that.$header_.find('th.detail').find('.fht-cell').width($this.innerWidth());
        }
        index = i - 1;
      }
      var $th = that.$header_.find(sprintf('th[data-field="%s"]', visibleFields[index]));
      if ($th.length > 1) {
        $th = $($ths[$this[0].cellIndex]);
      }
      $th.find('.fht-cell').width($this.innerWidth());
    });
    // horizontal scroll event
    // TODO: it's probably better improving the layout than binding to scroll event
    this.$tableBody.off('scroll').on('scroll', function () {
      that.$tableHeader.scrollLeft($(this).scrollLeft());
      if (that.options.showFooter && !that.options.cardView) {
        that.$tableFooter.scrollLeft($(this).scrollLeft());
      }
    });
    that.trigger('post-header');
  };
  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('<td><p class="th-inner"> </p><p class="fht-cell"></p></td>');
    }
    $.each(this.columns, function (i, column) {
      var key,
        falign = '', // footer align style
        valign = '',
        csses = [],
        style = {},
        class_ = sprintf(' class="%s"', column['class']);
      if (!column.visible) {
        return;
      }
      if (that.options.cardView && (!column.cardVisible)) {
        return;
      }
      falign = sprintf('text-align: %s; ', column.falign ? column.falign : column.align);
      valign = sprintf('vertical-align: %s; ', column.valign);
      style = calculateObjectValue(null, that.options.footerStyle);
      if (style && style.css) {
        for (key in style.css) {
          csses.push(key + ': ' + style.css[key]);
        }
      }
      html.push('<td&#39;, class_, sprintf(&#39; style="%s"&#39;, falign + valign + csses.concat().join(&#39;; &#39;)), &#39;>');
      html.push('<p class="th-inner">');
      html.push(calculateObjectValue(column, column.footerFormatter, [data], ' ') || ' ');
      html.push('</p>');
      html.push('<p class="fht-cell"></p>');
      html.push('</p>');
      html.push('</td>');
    });
    this.$tableFooter.find('tr').html(html.join(''));
    this.$tableFooter.show();
    clearTimeout(this.timeoutFooter_);
    this.timeoutFooter_ = setTimeout($.proxy(this.fitFooter, this),
      this.$el.is(':hidden') ? 100 : 0);
  };
  BootstrapTable.prototype.fitFooter = function () {
    var that = this,
      $footerTd,
      elWidth,
      scrollWidth;
    clearTimeout(this.timeoutFooter_);
    if (this.$el.is(':hidden')) {
      this.timeoutFooter_ = setTimeout($.proxy(this.fitFooter, this), 100);
      return;
    }
    elWidth = this.$el.css('width');
    scrollWidth = elWidth > this.$tableBody.width() ? getScrollBarWidth() : 0;
    this.$tableFooter.css({
      'margin-right': scrollWidth
    }).find('table').css('width', elWidth)
      .attr('class', this.$el.attr('class'));
    $footerTd = this.$tableFooter.find('td');
    this.$body.find('>tr:first-child:not(.no-records-found) > *').each(function (i) {
      var $this = $(this);
      $footerTd.eq(i).find('.fht-cell').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('.keep-open input').prop('disabled', false);
      if (needUpdate) {
        $items.filter(sprintf('[value="%s"]', index)).prop('checked', checked);
      }
      if ($items.filter(':checked').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(':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');
  };
  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 === 'server') {
      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, 'append');
    this.initSearch();
    this.initPagination();
    this.initSort();
    this.initBody(true);
  };
  BootstrapTable.prototype.prepend = function (data) {
    this.initData(data, 'prepend');
    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('field') || !params.hasOwnProperty('values')) {
      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 === 'server') {
          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 === 'string') {
        id = id.toString();
      } else if (typeof rowUniqueId === 'number') {
        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('id') || !params.hasOwnProperty('row')) {
        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('index') || !params.hasOwnProperty('row')) {
      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('index') || !params.hasOwnProperty('row')) {
        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('index')) {
      row = this.getData()[params.index];
    } else if (params.hasOwnProperty('uniqueId')) {
      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('>tr'),
      $td;
    if (this.options.detailView && !this.options.cardView) {
      col += 1;
    }
    $td = $tr.eq(row).find('>td').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').eq(j).hide();
      }
    }
    $td.attr('rowspan', rowspan).attr('colspan', colspan).show();
  };
  BootstrapTable.prototype.updateCell = function (params) {
    if (!params.hasOwnProperty('index') ||
      !params.hasOwnProperty('field') ||
      !params.hasOwnProperty('value')) {
      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(':enabled');
    var checked = rows.filter(':checked');
    rows.each(function () {
      $(this).prop('checked', !$(this).prop('checked'));
    });
    that.updateRows();
    that.updateSelected();
    that.trigger('uncheck-some', checked);
    checked = that.getSelections();
    that.trigger('check-some', checked);
  };
  BootstrapTable.prototype.checkAll_ = function (checked) {
    var rows;
    if (!checked) {
      rows = this.getSelections();
    }
    this.$selectAll.add(this.$selectAll_).prop('checked', checked);
    this.$selectItem.filter(':enabled').prop('checked', checked);
    this.updateRows();
    if (checked) {
      rows = this.getSelections();
    }
    this.trigger(checked ? 'check-all' : 'uncheck-all', 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('[data-index="%s"]', index)).prop('checked', checked);
    this.data[index][this.header.stateField] = checked;
    this.updateSelected();
    this.trigger(checked ? 'check' : 'uncheck', 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('field') || !obj.hasOwnProperty('values')) {
      return;
    }
    var isTrigger = true;
    /*是否触发选中事件,还是静默处理*/
    if (obj.hasOwnProperty('isTrigger') && !obj['isTrigger']) {
      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(':enabled')
          .filter(sprintf('[data-index="%s"]', index)).prop('checked', checked);
        row[that.header.stateField] = checked;
        rows.push(row);
        if (isTrigger) {
          that.trigger(checked ? 'check' : 'uncheck', row, $el);
        }
      }
    });
    this.updateSelected();
    if (isTrigger) {
      this.trigger(checked ? 'check-some' : 'uncheck-some', 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('margin-top', '0')
      .attr('class', this.$el_.attr('class') || ''); // 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('button[name="paginationSwitch"] i');
    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('refresh', 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('.keep-open input').prop('disabled', false);
      if ($items.filter(':checked').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"]', index));
    if ($tr.next().is('tr.detail-view') === (expand ? false : true)) {
      $tr.find('> td > .detail-icon').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('> tr[data-index="%s"]', 0)),
        that = this,
        detailIcon = null,
        executeInterval = false,
        idInterval = -1;
      if (!$tr.next().is('tr.detail-view')) {
        $tr.find('> td > .detail-icon').click();
        executeInterval = true;
      } else if (!$tr.next().next().is('tr.detail-view')) {
        $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('format%s', name)]) {
      if (typeof text === 'string') {
        this.options[sprintf('format%s', name)] = function () {
          return text;
        };
      } else if (typeof text === 'function') {
        this.options[sprintf('format%s', name)] = text;
      }
    }
    this.initToolbar();
    this.initPagination();
    this.initBody();
  };
  // BOOTSTRAP TABLE PLUGIN DEFINITION
  // =======================
  var allowedMethods = [
    'getOptions',
    'getSelections', 'getAllSelections', 'getData',
    'load', 'append', 'prepend', 'remove', 'removeAll',
    'insertRow', 'updateRow', 'updateCell', 'updateByUniqueId', 'removeByUniqueId',
    'getRowByUniqueId', 'showRow', 'hideRow', 'getHiddenRows',
    'mergeCells',
    'checkAll', 'uncheckAll', 'checkInvert',
    'check', 'uncheck',
    'checkBy', 'uncheckBy',
    'refresh',
    'resetView',
    'resetWidth',
    'destroy',
    'showLoading', 'hideLoading',
    'showColumn', 'hideColumn', 'getHiddenColumns', 'getVisibleColumns',
    'showAllColumns', 'hideAllColumns',
    'filterBy',
    'scrollTo',
    'getScrollPosition',
    'selectPage', 'prevPage', 'nextPage',
    'togglePagination',
    'toggleView',
    'refreshOptions',
    'resetSearch',
    'expandRow', 'collapseRow', 'expandAllRows', 'collapseAllRows',
    'updateFormatText'
  ];
  $.fn.bootstrapTable = function (option) {
    var value,
      args = Array.prototype.slice.call(arguments, 1);
    this.each(function () {
      var $this = $(this),
        data = $this.data('bootstrap.table'),
        options = $.extend({}, BootstrapTable.DEFAULTS, $this.data(),
          typeof option === 'object' && option);
      if (typeof option === 'string') {
        if ($.inArray(option, allowedMethods) < 0) {
          throw new Error("Unknown method: " + option);
        }
        if (!data) {
          return;
        }
        value = data[option].apply(data, args);
        if (option === 'destroy') {
          $this.removeData('bootstrap.table');
        }
      }
      if (!data) {
        $this.data('bootstrap.table', (data = new BootstrapTable(this, options)));
      }
    });
    return typeof value === 'undefined' ? 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 () {
    $('[data-toggle="table"]').bootstrapTable();
  });
})(jQuery);
Nach dem Login kopieren

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Wie läuft der Javascript-Modul-Loader?

So implementieren Sie eine Back-Force-Aktualisierung im WeChat-Web Seite

Das obige ist der detaillierte Inhalt vonSo stellen Sie die Bootstrap-Tabelle auf den Höhenprozentsatz ein. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Heiße KI -Werkzeuge

Undresser.AI Undress

Undresser.AI Undress

KI-gestützte App zum Erstellen realistischer Aktfotos

AI Clothes Remover

AI Clothes Remover

Online-KI-Tool zum Entfernen von Kleidung aus Fotos.

Undress AI Tool

Undress AI Tool

Ausziehbilder kostenlos

Clothoff.io

Clothoff.io

KI-Kleiderentferner

AI Hentai Generator

AI Hentai Generator

Erstellen Sie kostenlos Ai Hentai.

Heißer Artikel

R.E.P.O. Energiekristalle erklärten und was sie tun (gelber Kristall)
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Beste grafische Einstellungen
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. So reparieren Sie Audio, wenn Sie niemanden hören können
3 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Wie man alles in Myrise freischaltet
4 Wochen vor By 尊渡假赌尊渡假赌尊渡假赌

Heiße Werkzeuge

Notepad++7.3.1

Notepad++7.3.1

Einfach zu bedienender und kostenloser Code-Editor

SublimeText3 chinesische Version

SublimeText3 chinesische Version

Chinesische Version, sehr einfach zu bedienen

Senden Sie Studio 13.0.1

Senden Sie Studio 13.0.1

Leistungsstarke integrierte PHP-Entwicklungsumgebung

Dreamweaver CS6

Dreamweaver CS6

Visuelle Webentwicklungstools

SublimeText3 Mac-Version

SublimeText3 Mac-Version

Codebearbeitungssoftware auf Gottesniveau (SublimeText3)

Wie man vertikale Zentrierung von Bootstrap macht Wie man vertikale Zentrierung von Bootstrap macht Apr 07, 2025 pm 03:21 PM

Verwenden Sie Bootstrap, um die vertikale Zentrierung zu implementieren: FlexBox-Methode: Verwenden Sie den D-Flex, den Justify-Content-Center und die Ausrichtungsklassen aus Align-Item-Center, um Elemente in den Flexbox-Behälter zu platzieren. Methode für Ausstellungs-Iitem-Center-Klassen: Bei Browsern, die Flexbox nicht unterstützen, verwenden Sie die Klasse aus Align-items-Center-Klasse, vorausgesetzt, das übergeordnete Element hat eine definierte Höhe.

So erhalten Sie die Bootstrap -Suchleiste So erhalten Sie die Bootstrap -Suchleiste Apr 07, 2025 pm 03:33 PM

So verwenden Sie Bootstrap, um den Wert der Suchleiste zu erhalten: Bestimmt die ID oder den Namen der Suchleiste. Verwenden Sie JavaScript, um DOM -Elemente zu erhalten. Holen Sie sich den Wert des Elements. Führen Sie die erforderlichen Maßnahmen aus.

So verwenden Sie die Bootstrap -Taste So verwenden Sie die Bootstrap -Taste Apr 07, 2025 pm 03:09 PM

Wie benutze ich die Bootstrap -Taste? Führen Sie Bootstrap -CSS ein, um Schaltflächenelemente zu erstellen, und fügen Sie die Schaltfläche "Bootstrap" hinzu, um Schaltflächentext hinzuzufügen

So ändern Sie Bootstrap So ändern Sie Bootstrap Apr 07, 2025 pm 03:18 PM

Um die Größe der Elemente in Bootstrap anzupassen, können Sie die Dimensionsklasse verwenden, einschließlich: Einstellbreite:.

So fügen Sie Bilder auf Bootstrap ein So fügen Sie Bilder auf Bootstrap ein Apr 07, 2025 pm 03:30 PM

Es gibt verschiedene Möglichkeiten, Bilder in Bootstrap einzufügen: Bilder direkt mit dem HTML -IMG -Tag einfügen. Mit der Bootstrap -Bildkomponente können Sie reaktionsschnelle Bilder und weitere Stile bereitstellen. Legen Sie die Bildgröße fest und verwenden Sie die IMG-Fluid-Klasse, um das Bild anpassungsfähig zu machen. Stellen Sie den Rand mit der img-beliebten Klasse ein. Stellen Sie die abgerundeten Ecken ein und verwenden Sie die IMG-Rund-Klasse. Setzen Sie den Schatten, verwenden Sie die Schattenklasse. Größen Sie die Größe und positionieren Sie das Bild im CSS -Stil. Verwenden Sie mit dem Hintergrundbild die CSS-Eigenschaft im Hintergrund.

So schreiben Sie geteilte Zeilen auf Bootstrap So schreiben Sie geteilte Zeilen auf Bootstrap Apr 07, 2025 pm 03:12 PM

Es gibt zwei Möglichkeiten, eine Bootstrap -Split -Zeile zu erstellen: Verwenden des Tags, das eine horizontale Split -Linie erstellt. Verwenden Sie die CSS -Border -Eigenschaft, um benutzerdefinierte Style Split -Linien zu erstellen.

So sehen Sie das Datum der Bootstrap So sehen Sie das Datum der Bootstrap Apr 07, 2025 pm 03:03 PM

ANTWORT: Sie können die Datumsauswahlkomponente von Bootstrap verwenden, um Daten auf der Seite anzuzeigen. Schritte: Stellen Sie das Bootstrap -Framework ein. Erstellen Sie ein Eingangsfeld für Datumsauswahl in HTML. Bootstrap fügt dem Selektor automatisch Stile hinzu. Verwenden Sie JavaScript, um das ausgewählte Datum zu erhalten.

So richten Sie das Framework für Bootstrap ein So richten Sie das Framework für Bootstrap ein Apr 07, 2025 pm 03:27 PM

Um das Bootstrap -Framework einzurichten, müssen Sie die folgenden Schritte befolgen: 1. Verweisen Sie die Bootstrap -Datei über CDN; 2. Laden Sie die Datei auf Ihrem eigenen Server herunter und hosten Sie sie. 3.. Fügen Sie die Bootstrap -Datei in HTML hinzu; 4. Kompilieren Sie Sass/weniger bei Bedarf; 5. Importieren Sie eine benutzerdefinierte Datei (optional). Sobald die Einrichtung abgeschlossen ist, können Sie die Grid -Systeme, -Komponenten und -stile von Bootstrap verwenden, um reaktionsschnelle Websites und Anwendungen zu erstellen.

See all articles