pug - 在本地提供数据时，Bootstrap-Table 不搜索和总计行

Question

我确实测试了您的第一个示例代码，该代码运行良好，但调用了服务器端数据。

使用路由我将服务器端数据推送到我的 pug 文件中。然后我遇到了 Bootstrap Tables :) 几个小时后，我终于使用修改后的示例代码显示了我的数据，但搜索不起作用，总行数未定义。我究竟做错了什么？我怀疑这是服务器与客户端的问题？

我在路由中做了一个 POST 来获取数据。在 Pug 中，我将 JSON 数据传递给 bootstrap-table 脚本。我本来很想使用 POST 方法，但我需要将变量传递给服务器（文件名、字段名等），但我认为这种方法效果不佳。或者你有一个例子吗？

供应商.pug

    extends layout

block title
  title TIM - Suppliers

block content

  +menu('suppliers')    

  main#suppliers
     .container.mw-1200
      div.subcontainer
        .flexrow.nowrap.header
            h2.title-header Suppliers
            .create-button
              .a.create-button(tabindex="0" role="button" href="/cities/create")
                button.btn.btn-grey( type="button") Create Supplier

        table#table(data-toolbar='#toolbar' data-search='true' data-show-refresh='false' data-show-toggle='false' data-show-fullscreen='false' data-show-columns='true' data-show-columns-toggle-all='true' data-detail-view='false' data-show-export='false' data-click-to-select='true' data-minimum-count-columns='2' data-show-pagination-switch='false' data-pagination='true' data-id-field='id' data-page-list='[10, 25, 50, 100, all]' data-side-pagination='server' data-server-sort="false" data-response-handler='responseHandler' )

block script
 
  script.
    var local_data =!{JSON.stringify(data)}
  include suppliers.js

供应商.js

<script>
  var $table = $('#table')
  var $remove = $('#remove')
  var selections = []


  function getIdSelections() {
    return $.map($table.bootstrapTable('getSelections'), function (row) {
      return row.id
    })
  }

  function responseHandler(res) {
    $.each(res.rows, function (i, row) {
      row.state = $.inArray(row.id, selections) !== -1
    })
    return res
  }

  function detailFormatter(index, row) {
    var html = []
    $.each(row, function (key, value) {
      html.push('<p><b>' + key + ':</b> ' + value + '</p>')
    })
    return html.join('')
  }

  function operateFormatter(value, row, index) {
    return [
      '<a class="like" href="javascript:void(0)" title="Edit">',
      '<i class="fa fa-pen"></i>',
      '</a>  ',
      '<a class="remove" href="javascript:void(0)" title="Remove">',
      '<i class="fa fa-trash"></i>',
      '</a>'
    ].join('')
  }

  window.operateEvents = {
    'click .like': function (e, value, row, index) {
      alert('You click like action, row: ' + JSON.stringify(row))
    },
    'click .remove': function (e, value, row, index) {
      $table.bootstrapTable('remove', {
        field: 'id',
        values: [row.id]
      })
    }
  }

  function totalTextFormatter(data) {
    return 'Total'
  }

  function totalNameFormatter(data) {
    return data.length
  }

  function totalPriceFormatter(data) {
    var field = this.field
    return '$' + data.map(function (row) {
      return +row[field].substring(1)
    }).reduce(function (sum, i) {
      return sum + i
    }, 0)
  }

  function initTable() {
    $table.bootstrapTable('destroy').bootstrapTable({
      height: 550,
      locale: $('#locale').val(),
      columns: [
        [{
          field: 'state',
          checkbox: true,
          align: 'center',
          valign: 'middle'
        }, {
          title: 'ID',
          field: 'Addressbook_id',
          align: 'center',
          valign: 'middle',
          sortable: true,
          footerFormatter: totalTextFormatter
        }, {
          field: 'Organisation',
          title: 'Organisation',
          sortable: true,
          footerFormatter: totalNameFormatter,
          align: 'center'
        }, {
          field: 'citycode',
          title: 'Code',
          sortable: true,
          align: 'center',
          footerFormatter: totalPriceFormatter
        }, {
          field: 'operate',
          title: ' ',
          align: 'center',
          clickToSelect: false,
          events: window.operateEvents,
          formatter: operateFormatter
        }]
      ]
    })
    $table.on('check.bs.table uncheck.bs.table ' +
      'check-all.bs.table uncheck-all.bs.table',
    function () {
      $remove.prop('disabled', !$table.bootstrapTable('getSelections').length)

      // save your data, here just save the current page
      selections = getIdSelections()
      // push or splice the selections if you want to save all data selections
    })
    $table.on('all.bs.table', function (e, name, args) {
      console.log(name, args)
    })
    $remove.click(function () {
      var ids = getIdSelections()
      $table.bootstrapTable('remove', {
        field: 'id',
        values: ids
      })
      $remove.prop('disabled', true)
    })
  }

  $(function() {
    initTable()
  
    //$('#locale').change(initTable)
  
    $('#table').bootstrapTable( 'load', local_data );
  })

  </script>

标签： pugbootstrap-table