Adminlte: How to apply datatables in AdminLTE? Is it already built in or not?

[andyhughes73]

I am trying to apply the DataTables styling to my existing tables. I just want to check, is this functionality already built into the template and active, or do I need to manually include the DataTables CSS and JS files?

I can't see any reference to tables in the app or demo js files.

[condor-bird]

For datatables need to connect the appropriate styles and scripts.
Example:

CSS file:

<link rel="stylesheet" href="../../plugins/datatables/dataTables.bootstrap.css">

JavaScript file:
<script src="../../plugins/datatables/jquery.dataTables.min.js"></script>
<script src="../../plugins/datatables/dataTables.bootstrap.min.js"></script>

For the table must specify an identifier.

<table id="example" class="table table-bordered table-hover">

 </table>

Use the function for the table:

<script>
 $(function () {
$("#example").DataTable();
});
</script>

[andyhughes73]

So you mean all tables would need to have the same ID = example?

What about if there are two tables on the same page? I thought you weren't supposed to have more than one ID reference on a page?

[condor-bird]

I meant other. No, identifier must be unique within a one page. If you use the ID, then each table must have a unique identifier is

<table id="example1" class="table table-bordered table-hover">

 </table>

<table id="example2" class="table table-bordered table-hover">

 </table>

 $(function () {
$("#example1, #example2").DataTable();
});

Or use class:

<table class="datatables">

 </table>

 $(function () {
$(".datatables").DataTable();
});