DataTable example for Bootstrap4 table

Datatables

Bootstrap 4 datatable example

Today we are going to learn what are datatable and what are its uses & how can we integrate it.

Now lets start with knowing what is datatable

What is DataTable?

  • Data table is a JQuery plugin for creating table related listing and adding connections between them.
  • In simple when we create a bootstrap table, only the record of table are shown rather than search,pagination,filter etc.
  • So to make a table user friendly and easy Data Tables are used.
  • With this datatable we no need to create pagination,search or anything, just with a few lines of script you table is ready.
  • One we write script we have following features automatically.
    • Search
    • Pagination
    • Filter

What are the advantages of dataTables?

Coming to advantages we have many advantages using datatable,Lets see them.

  • Faster load of data within seconds.
  • Automatic configuration.
  • Time saving
  • Applies search for every field.
  • Automatically provides length filter.
  • Sort data by any field in the list.

Now we got a good idea about what is datatable, features & its advantages, so lets move on to how to implement datatable for our table

STEP 1 :

Create a HTML page and add BootstrapTable.

<table class="table table-dark table-bordered display"  cellpadding="0" cellspacing="0" border="0" width="100%" id="myTable">
  <thead class="thead-light">
    <tr>
      <th scope="col">S.NO</th>
      <th scope="col">First</th>
      <th scope="col">Last</th>
      <th scope="col">Gender</th>
      <th scope="col">Age</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">1</th>
      <td>Mark</td>
      <td>Otto</td>
      <td>Male</td>
      <td>25</td>
    </tr>
    <tr>
      <th scope="row">2</th>
      <td>Jacob</td>
      <td>Thornton</td>
      <td>Male</td>
      <td>26</td>
    </tr>
    <tr>
      <th scope="row">3</th>
      <td>Larry</td>
      <td>the Bird</td>
      <td>FeMale</td>
      <td>16</td>
    </tr>
    <tr>
      <th scope="row">4</th>
      <td>Tejaswi</td>
      <td>Reddy</td>
      <td>FeMale</td>
      <td>19</td>
    </tr>
    <tr>
      <th scope="row">5</th>
      <td>Tanya</td>
      <td>Gupta</td>
      <td>FeMale</td>
      <td>20</td>
    </tr>
    <tr>
      <th scope="row">6</th>
      <td>Vishal</td>
      <td>Software Engineer</td>
      <td>Male</td>
      <td>25</td>
    </tr>
    <tr>
      <th scope="row">7</th>
      <td>Pravallika</td>
      <td>CEO</td>
      <td>FeMale</td>
      <td>24</td>
    </tr>
    <tr>
      <th scope="row">8</th>
      <td>Prasanna</td>
      <td>IPS</td>
      <td>FeMale</td>
      <td>24</td>
    </tr>
    <tr>
      <th scope="row">9</th>
      <td>Abhishek</td>
      <td>HR</td>
      <td>Male</td>
      <td>26</td>
    </tr>
  </tbody>
</table>

STEP 2:

Add stylesheet link and script links inside head.Here i am not writing it inside head, you need to mention them inside head tag of your code.

These links consists of datatable plugin links & bootstrap styling links.

<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://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script> 
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>	
	<script type="text/javascript" src = "https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
	<script type="text/javascript" src = "https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js"></script>
	<script type="text/javascript" src = "//cdn.datatables.net/buttons/1.1.2/js/buttons.flash.min.js"></script>
	<script type="text/javascript" src = "//cdn.datatables.net/buttons/1.1.2/js/buttons.html5.min.js"></script>
	<script type="text/javascript" src = "//cdn.datatables.net/buttons/1.1.2/js/buttons.print.min.js"></script>
	<script type="text/javascript" src = "https://cdn.datatables.net/buttons/1.5.2/js/buttons.colVis.min.js"></script>

	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.11/css/jquery.dataTables.min.css">

STEP 3 :

Add the script inside script tag.

<script type="text/javascript" language="javascript" >
  	$(document).ready(function() {
		var dataTable = $('#myTable').DataTable( {
		});
	});
</script>

Note* : Here myTable is my table id so change accordingly.

With this we can create datatable with default features of default 10 limit data  and filter with 10,25,50,100

If you want to modify this table or if you want to change the default limit & filters we can do that.

To change page length
<script type="text/javascript" language="javascript" >
  	$(document).ready(function() {
		var dataTable = $('#myTable').DataTable( {
			"pageLength": 15,
		});
	});
</script>
To change filters count
 <script type="text/javascript" language="javascript" >
  	$(document).ready(function() {
		var dataTable = $('#myTable').DataTable( {
			"lengthMenu": [[5, 10, 15,20,25,30,25,40,45,-1],[5, 10, 15,20,25,30,25,40,45,All] ],
		});
	});
</script>

If you see the above script you can see -1 in the left array & All in the right array.Which means if we declare -1 then we are saying datatable to display all  rows & all  is the name which will be visible to users.

You can add any number in the left array like i used 5 multiple you can add any number like 1,2,3,4…. in the left array & name of the numbers to be displayed for users.

Your output be something like this.

Datatable example

Hope this article helps you and save your time.Do comment your views and share with your friends & colleagues 

Related articles:

For more updates:

Follow us on our Facebook page :
Facebook

Do Follow my Instagram page for more updates :
Instagram

One thought on “DataTable example for Bootstrap4 table

Leave a Reply

Your email address will not be published. Required fields are marked *

The maximum upload file size: 2 MB. You can upload: image, document. Links to YouTube, Facebook, Twitter and other services inserted in the comment text will be automatically embedded.