AdminLTE Datatables not applying style to label
up vote
0
down vote
favorite
So I am trying to create a datatable using adminlte template:
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>
It is applying the style correctly and all. Then I try to implement searching, paging, etc.
It would apply the style correctly except for the search and show..entries label:
Sorry if I'm missing something very obvious here. Need help ;m;
jquery html css datatables adminlte
add a comment |
up vote
0
down vote
favorite
So I am trying to create a datatable using adminlte template:
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>
It is applying the style correctly and all. Then I try to implement searching, paging, etc.
It would apply the style correctly except for the search and show..entries label:
Sorry if I'm missing something very obvious here. Need help ;m;
jquery html css datatables adminlte
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
So I am trying to create a datatable using adminlte template:
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>
It is applying the style correctly and all. Then I try to implement searching, paging, etc.
It would apply the style correctly except for the search and show..entries label:
Sorry if I'm missing something very obvious here. Need help ;m;
jquery html css datatables adminlte
So I am trying to create a datatable using adminlte template:
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>
It is applying the style correctly and all. Then I try to implement searching, paging, etc.
It would apply the style correctly except for the search and show..entries label:
Sorry if I'm missing something very obvious here. Need help ;m;
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>
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>
jquery html css datatables adminlte
jquery html css datatables adminlte
edited 4 hours ago
phuzi
4,39011835
4,39011835
asked 4 hours ago
Akii
637
637
add a comment |
add a comment |
2 Answers
2
active
oldest
votes
up vote
0
down vote
You need to put something like the following in your HTML... (immediately after the 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>
Hope this help?
add a comment |
up vote
0
down vote
use bootstrap.min.css
in style. look for code snippet.
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>
add a comment |
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
You need to put something like the following in your HTML... (immediately after the 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>
Hope this help?
add a comment |
up vote
0
down vote
You need to put something like the following in your HTML... (immediately after the 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>
Hope this help?
add a comment |
up vote
0
down vote
up vote
0
down vote
You need to put something like the following in your HTML... (immediately after the 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>
Hope this help?
You need to put something like the following in your HTML... (immediately after the 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>
Hope this help?
answered 4 hours ago
u2tope
266
266
add a comment |
add a comment |
up vote
0
down vote
use bootstrap.min.css
in style. look for code snippet.
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>
add a comment |
up vote
0
down vote
use bootstrap.min.css
in style. look for code snippet.
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>
add a comment |
up vote
0
down vote
up vote
0
down vote
use bootstrap.min.css
in style. look for code snippet.
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>
use bootstrap.min.css
in style. look for code snippet.
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>
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>
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>
edited 4 hours ago
answered 4 hours ago
Shiv Kumar Baghel
9821617
9821617
add a comment |
add a comment |
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53204126%2fadminlte-datatables-not-applying-style-to-label%23new-answer', 'question_page');
}
);
Post as a guest
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password