Question

我在dataTable中使用Bootstrap实时搜索

实时搜索选择框仅在第一页中可见。在第一页之后它不可见。

我已将所需的JS / CSS文件下载到我的电脑

<script src='./js/jquery.dataTables.min.js'></script>
<script src='./js/dataTables.bootstrap.min.js'></script>
<script src='./js/bootstrap.min.js'></script>
<script src='./js/bootstrap-select.min.js'></script>

<script>
    $(document).ready(function() {
    $('.jobreq_list').DataTable();
} );
</script>
<link rel='stylesheet' href='./css/bootstrap.min.css' />
<link rel='stylesheet' href='./css/dataTables.bootstrap.min.css' />
<link rel="stylesheet" href="./css/bootstrap-select.min.css" />

HTML

  echo"<table class='jobreq_list table table-striped table-bordered'>
    <thead><tr><th>S.no</th><th>Supervisor</th><th>JobReq</th><th>Planning Date</th></tr></thead><tbody>";
    $sno=0;
    foreach($result as $row ) {
    $supervisor=$row['supervisor'];
    $ufirstname=$row['firstname'];
    $ulastname=$row['lastname'];
    $uid=$row['uid'];
    $rat_planning_date=date("Y-m-d",strtotime($row['rat_planning_date']));
    $sno++;
    echo"<tr><td>$sno</td><td>$supervisor</td><td>$ufirstname</td><td>
    <select class='selectpicker' data-show-subtext='true' data-live-search='true'>
           <option>Expert PHP</option>
            <option>Demo PHP</option>
            <option>PHP Tutorials</option>
            <option>PHP Framework & PHP Framework PHP FrameworkPHP Framework</option>
            <option>PHP Libraries</option>
            <option>HTML</option>
            <option>CSS</option>
            <option>JS</option>
            <option>MySQL</option>
          </select>

    </td></tr>";
    }
    echo"</tbody></table>";

Answer 1

从Live Search文档中，您应该在更改数据表中的页面时使用其rerender方法。我不是百分百肯定，但我的猜测是Live Search只会在任何特定时刻触发页面上的可见项目。从Live Search文档：

您可以使用渲染强制重新渲染bootstrap-select ui 方法。如果您以编程方式更改任何基础知识，这将非常有用影响元素布局的值。

$('.selectpicker').selectpicker('render');

Read the Live Search methods documentation here

现在，您要做的就是找到DataTables的平等事件，您可以在页面更改时挂钩。

实时搜索不适用于数据表

1 个答案: