【问题标题】：AdminLTE Datatables not applying style to labelAdminLTE 数据表未将样式应用于标签
【发布时间】：2018-11-08 08:42:50
【问题描述】：
所以我正在尝试使用 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;
【问题讨论】：
标签：
jquery
html
css
datatables
adminlte
【解决方案1】：
在风格上使用bootstrap.min.css。寻找代码sn-p。
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>
【解决方案2】：
您需要在 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>
希望得到帮助？