引导表搜索不适用于行跨度答案

【问题标题】：Bootstrap-table search is not working properly for rowspan引导表搜索不适用于行跨度
【发布时间】：2020-10-29 03:35:34
【问题描述】：

我正在使用 bootstrap-table 插件，如果您搜索的数据是 rowspan 行表格式正在发生变化，即使行数也不正确，在随附的屏幕截图中，我有 3 行，其中包含一个子行，之后rowspan 计数应该是 3，但在分页中它显示计数为 6

var $table = $('#table')

function buildTable($el, cells, rows) {
  var columns = []
  var data = []

  var classes = $('.toolbar input:checked').next().text()
  $el.bootstrapTable('destroy').bootstrapTable({
    columns: columns,
    data: data,
    exportDataType: "all",

    exportTypes: ['csv', 'excel'],
    exportOptions: {

      fileName: 'Data Export -',

    },

    search: true,
    stickyHeader: true,
    stickyHeaderOffsetLeft: '0',
    stickyHeaderOffsetRight: '0',
    theadClasses: classes,
    pageSize: 25,
    pagination: true
  })
}

$(function() {
  $('.toolbar input').change(function() {
    buildTable($table, 0, 0)

  })
  buildTable($table, 0, 0)

})

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
  <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
  <link href="https://unpkg.com/bootstrap-table@1.16.0/dist/bootstrap-table.min.css" rel="stylesheet">
  <link href="https://unpkg.com/bootstrap-table@1.16.0/dist/extensions/sticky-header/bootstrap-table-sticky-header.css" rel="stylesheet">
  <script src="https://unpkg.com/bootstrap-table@1.16.0/dist/bootstrap-table.min.js"></script>
  <script src="https://unpkg.com/bootstrap-table@1.16.0/dist/extensions/sticky-header/bootstrap-table-sticky-header.min.js"></script>
  <script src="https://unpkg.com/tableexport.jquery.plugin/tableExport.min.js"></script>
  <script src="https://unpkg.com/bootstrap-table@1.16.0/dist/extensions/export/bootstrap-table-export.min.js"></script>

  <style>
    table td {
      overflow: hidden;
    }
    
    table {
      width: 600px;
      table-layout: fixed;
    }
    
    td {
      word-wrap: break-word;
    }
  </style>

</head>

<body>


  <table class="table table--cells table--comfy table--hover table--striped table--dark" data-page-list="[50, 100, 150, ALL]" data-toolbar="#toolbar" id="table" data-show-columns="true" data-search="true" data-export-header="true" data-show-export="true"
    style="text-align:center; ">
    <thead name="theadClasses" class="bg-dark text-white">
      <tr>
        <th style="text-align:center" rowspan=2>Header 1</th>
        <th style="text-align:center" rowspan=2>Header 2</th>
        <th style="text-align:center" rowspan=2>Header 3</th>

        <th style="text-align:center" colspan=3>Colspan Header</th>
      </tr>
      <tr>
        <th style="text-align:center">Sub_header 1 </th>
        <th style="text-align:center">Sub_header 2 </th>
        <th style="text-align:center">Sub_header 3 </th>
      </tr>
    </thead>
    <tbody>

      <tr>

        <td align="center" rowspan=2>some_data1</td>
        <td align="center" rowspan=2>some_data2</td>
        <td align="center" rowspan=2>some_data3</td>
        <td align="center">some_data4</td>
        <td align="center">some_data5</td>
        <td align="center">some_data6</td>

      </tr>

      <tr>
        <td align="center">some_data7 </td>
        <td align="center">some_data8 </td>
        <td align="center">some_data9</td>

      </tr>
      <tr>

        <td align="center" rowspan=2>some_data10</td>
        <td align="center" rowspan=2>some_data11</td>
        <td align="center" rowspan=2>some_data12</td>
        <td align="center">some_data13</td>
        <td align="center">some_data14</td>
        <td align="center">some_data15</td>

      </tr>

      <tr>
        <td align="center">some_data16 </td>
        <td align="center">some_data17 </td>
        <td align="center">some_data18</td>

      </tr>
      <tr>

        <td align="center" rowspan=2>some_data19</td>
        <td align="center" rowspan=2>some_data20</td>
        <td align="center" rowspan=2>some_data21</td>
        <td align="center">some_data22</td>
        <td align="center">some_data23</td>
        <td align="center">some_data24</td>

      </tr>

      <tr>
        <td align="center">some_data25 </td>
        <td align="center">some_data26 </td>
        <td align="center">some_data11</td>

      </tr>



    </tbody>
  </table>
  </div>


</body>

</html>

Table image.

after search

搜索值some_data26

请帮我解决这个问题。

【问题讨论】：

我的回答对你有帮助吗？
不@Miro，我正在搜索后寻找数据，表格的格式因行跨度而发生变化。

标签： javascript bootstrap-table

【解决方案1】：

快速而肮脏的解决方法：

.no-records-found{
  width: max-content;
  display:block;
}

这将导致“未找到”文本位于左侧，但至少不会破坏前导。由于某种原因，无法使其 100% 运行。

【讨论】：