How to use jQuery DataTables?

How to use fancybox gallery plugin?

In this post, How to use jQuery DataTables? We have been using HTML, CSS & JAVASCRIPT, how we have inserted HTML, CSS, JAVASCRIPT into our file, this is most important used to big table,
we can search easily by name, date etc. Just copy and paste this simple code and ready your fillter datatable.

if you want use more jQuery DataTables in your project, you can change table Id.

By using this plugin the design will look like this.

First of all you put Html in your file.

<div class="display-maintable"> <table id="example" style="width:100%"> <thead> <tr> <th>Name</th> <th>Date</th> <th>Loaction</th> <th>Age</th> <th>Salary</th> </tr> </thead> <tbody> <tr> <td>Tiger</td> <td>10-2-2018</td> <td>Indore</td> <td>40</td> <td>50,000</td> </tr> <tr> <td>Aayush</td> <td>14-4-2018</td> <td>Indore</td> <td>40</td> <td>50,000</td> </tr> <tr> <td>Shalini</td> <td>17-3-2018</td> <td>Indore</td> <td>25</td> <td>30,000</td> </tr> <tr> <td>Suyush</td> <td>14-2-2018</td> <td>Indore</td> <td>33</td> <td>40,000</td> </tr> <tr> <td>Tiger</td> <td>10-2-2018</td> <td>Indore</td> <td>40</td> <td>50,000</td> </tr> <tr> <td>Suresh</td> <td>10-2-2018</td> <td>Indore</td> <td>40</td> <td>50,000</td> </tr> <tr> <td>Jayesh</td> <td>10-2-2018</td> <td>Indore</td> <td>40</td> <td>50,000</td> </tr> <tr> <td>Vinay</td> <td>10-2-2018</td> <td>Indore</td> <td>40</td> <td>50,000</td> </tr> <tr> <td>Vikash</td> <td>10-2-2018</td> <td>Indore</td> <td>40</td> <td>50,000</td> </tr> <tr> <td>Aman</td> <td>10-2-2018</td> <td>Indore</td> <td>40</td> <td>50,000</td> </tr> <tr> <td>Vijay</td> <td>20-2-2018</td> <td>Indore</td> <td>36</td> <td>45,000</td> </tr> <tr> <td>Naresh</td> <td>10-2-2018</td> <td>Indore</td> <td>40</td> <td>50,000</td> </tr> <tr> <td>Ipsum</td> <td>12-2-2018</td> <td>Indore</td> <td>40</td> <td>40,000</td> </tr> <tr> <td>lorem</td> <td>15-2-2018</td> <td>Indore</td> <td>30</td> <td>40,000</td> </tr> </tbody> </table> </div>

Then put Css in your file.

  


And css link in your Html head section

https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.css

And Some css put in your css file.

*{
    margin: 0px;
}
.display-maintable {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    padding: 30px;
    font-family: cursive;
    box-shadow: 0px 0px 28px 0px #d3d3d3;
    border-radius: 2px;
}
.display-maintable table td, .display-maintable table th {
    border: 1px solid #ccc !important;
}
.dataTables_length {
    margin-bottom: 15px;
}
.display-maintable table thead th {
    text-align: left;
    padding-left: 11px;
}

  


And Some js link in your page.

https://code.jquery.com/jquery-3.3.1.slim.min.js

https://cdn.datatables.net/v/dt/dt-1.10.18/datatables.min.js

And Some js put in your page.

$(document).ready(function() {
    $('#example').DataTable();
});


We have given the best suitable and easiest way for How to use jQuery DataTables?

Thanks for reading this artificial. we have Html & Html5, jquery, js, css question & answer & Angular6 also. For more designs solutions like this you simply visit our site’s post and pages. collection of amazing designing , development tricks and tips. hope you like How to use How to use jQuery DataTables? for any query and suggestion please comment.

#table #datatable #jQuerytable #jquery #Html #css

Leave a Reply

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