AdminLTE 数据表未将样式应用于标签

Question

所以我正在尝试使用 adminlte 模板创建数据表：

var tblCardHistory;
tblCardHistory = $("#cardhistorynew-table").DataTable({
    "deferRender": true,
    "paging": true,
    "lengthChange": true,
    "searching": true,
    "ordering": true,
    "info": true,
    "autoWidth": true,
    columns: [
        { data: "emp_id" },
        { data: "name" },
        { data: "card_no" },
        { data: "change_time" },
        { data: "change_date" }
    ]
});

<link href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<div class="box-body">
    <div id="cardhistorynew-table_wrapper" class="dataTables_wrapper form-inline dt-bootstrap">
        <div class="row">
            <div class="col-sm-12">
                <table id="cardhistorynew-table" class="table table-bordered table-striped table-hover data-table" role="grid" aria-describedby="cardhistorynew-table_info">
                    <thead>
                        <tr role="row">
                            <th class="sorting_asc" tabindex="0" aria-controls="cardhistorynew-table" rowspan="1" colspan="1">Employee Id</th>
                            <th class="sorting" tabindex="0" aria-controls="cardhistorynew-table" rowspan="1" colspan="1">Name</th>
                            <th class="sorting" tabindex="0" aria-controls="cardhistorynew-table" rowspan="1" colspan="1">Card Number</th>
                            <th class="sorting" tabindex="0" aria-controls="cardhistorynew-table" rowspan="1" colspan="1">Creation Time</th>
                            <th class="sorting" tabindex="0" aria-controls="cardhistorynew-table" rowspan="1" colspan="1">Creation Date</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- rows -->
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

它正在正确地应用样式。然后我尝试实现搜索，分页等

它将正确应用样式，但搜索和显示..entries 标签除外：

抱歉，如果我遗漏了一些非常明显的东西。需要帮助 ;m;

Answer 1

您需要在 HTML... 中添加类似以下的内容（紧跟在 dataTables_wrapper DIV 之后）

<div class="row">
  <div class="col-sm-6">
    <div class="dataTables_length" id="example1_length">
       <label>Show 
          <select name="example1_length" class="form-control input-sm" aria-controls="example1">
             <option value="10">10</option>
             <option value="25">25</option>
             <option value="50">50</option>
             <option value="100">100</option>
          </select> entries</label>
    </div>
  </div>
  <div class="col-sm-6">
    <div class="dataTables_filter" id="example1_filter">
       <label>Search:<input class="form-control input-sm" aria-controls="example1" type="search" placeholder=""></label>
    </div>
  </div>
</div>

希望这有帮助吗？

Answer 2

在风格上使用bootstrap.min.css。寻找代码片段。

var tblCardHistory;
tblCardHistory = $("#cardhistorynew-table").DataTable({
    "deferRender": true,
    "paging": true,
    "lengthChange": true,
    "searching": true,
    "ordering": true,
    "info": true,
    "autoWidth": true,
    columns: [
        { data: "emp_id" },
        { data: "name" },
        { data: "card_no" },
        { data: "change_time" },
        { data: "change_date" }
    ]
});

<link href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet"/>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">


<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<div class="box-body">
    <div id="cardhistorynew-table_wrapper" class="dataTables_wrapper form-inline dt-bootstrap">
        <div class="row">
            <div class="col-sm-12">
                <table id="cardhistorynew-table" class="table table-bordered table-striped table-hover data-table" role="grid" aria-describedby="cardhistorynew-table_info">
                    <thead>
                        <tr role="row">
                            <th class="sorting_asc" tabindex="0" aria-controls="cardhistorynew-table" rowspan="1" colspan="1">Employee Id</th>
                            <th class="sorting" tabindex="0" aria-controls="cardhistorynew-table" rowspan="1" colspan="1">Name</th>
                            <th class="sorting" tabindex="0" aria-controls="cardhistorynew-table" rowspan="1" colspan="1">Card Number</th>
                            <th class="sorting" tabindex="0" aria-controls="cardhistorynew-table" rowspan="1" colspan="1">Creation Time</th>
                            <th class="sorting" tabindex="0" aria-controls="cardhistorynew-table" rowspan="1" colspan="1">Creation Date</th>
                        </tr>
                    </thead>
                    <tbody>
                        <!-- rows -->
                       <tr>
    <th scope="row">1</th>
    <td>Mark 1</td>
    <td>Otto</td>
    <td>@mdo</td>
    <td>@twitter 3</td>
</tr>
<tr>
    <th scope="row">2</th>
    <td>Mark 10</td>
    <td>Otto</td>
    <td>@mdo</td>
    <td>@twitter 3</td>
</tr>
<tr>
    <th scope="row">3</th>
    <td>Jacob</td>
    <td>Thornton</td>
    <td>@fat</td>
    <td>@twitter 4</td>
</tr>
<tr>
    <th scope="row">4</th>
    <td>Larry</td>
    <td>the Bird</td>
    <td>@twitter</td>
    <td>@twitter 5</td>
</tr>
<tr>
    <th scope="row">5</th>
    <td>Mark 5</td>
    <td>Otto 5</td>
    <td>@mdo 5</td>
    <td>@twitter 5</td>
</tr>
<tr>
    <th scope="row">6</th>
    <td>Mark 6</td>
    <td>Otto 6</td>
    <td>@mdo 6</td>
    <td>@twitter 6</td>
</tr>
<tr>
    <th scope="row">7</th>
    <td>Mark 7</td>
    <td>Otto 7</td>
    <td>@mdo 7</td>
    <td>@twitter 7</td>
</tr>
<tr>
    <th scope="row">8</th>
    <td>Mark 8</td>
    <td>Otto 8</td>
    <td>skb 8</td>
    <td>@twitter 8</td>
</tr>
<tr>
    <th scope="row">9</th>
    <td>Mark 9</td>
    <td>Otto 9</td>
    <td>@mdo 9</td>
    <td>@twitter 9</td>
</tr>
<tr>
    <th scope="row">10</th>
    <td>Mark 10</td>
    <td>Otto 10</td>
    <td>@mdo 10</td>
    <td>@twitter 10</td>
</tr>
<tr>
    <th scope="row">11</th>
    <td>Mark 11</td>
    <td>Otto 11</td>
    <td>@mdo 11</td>
    <td>@twitter 11</td>
</tr>
<tr>
    <th scope="row">12</th>
    <td>Mark 9</td>
    <td>Otto 12</td>
    <td>@mdo 12</td>
    <td>@twitter 12</td>
</tr>

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

AdminLTE 数据表未将样式应用于标签

AdminLTE Datatables not applying style to label

html

css

jquery

datatables

adminlte