Materialize Datatables Example – Material DataTables

Materialize Datatables Example – Material DataTables

Material DataTables Config Add Class Example

The MDL provides List of CSS classes to apply List of predefined Show Content of data and behavioral simple enhancements to the show data a table view as data-table.Materialize Datatables Example – Material DataTables

Class Name & Description

  • 1.mdl-data-table using material
  • 2.mdl-js-data-table using material
  • 3.mdl-data-table–selectable using material
  • 4.mdl-data-table__cell–non-numeric using material

Example

Materialize Design Data Tables Example

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap live-datatable-example</title>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<script src="js/jquery.js"></script>
	<link rel="stylesheet" href="js/datatables.min.css">
	<link rel="stylesheet" href="js/materialize.min.css">
	<script src="js/datatables.min.js"></script>
	<script src="js/materialize.min.js"></script>
  

</head>
<body>

Table data...........
........................
....................
<body>
</html>

Script.js

$(document).ready(function (){
    var table = $('#live-datatable-example').DataTable({
        "order": [],
        "dom": 'Bfrtip',  
		// Button class
        "buttons": {
           "dom": {
              "button": {
                "tag": "button",
                "className": "waves-effect waves-light btn mrm"
              }
           },
		   // like csv Buttons,print buttons,pdfHtml5 button
           "buttons": [ 'copyHtml5', 'excelHtml5', 'csvHtml5', 'pdfHtml5' ]   
        }
    });
});

Table Data

<table id="live-datatable-example" class="display" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th>Client Name</th>
            <th>Post</th>
            <th>Shop</th>
            <th>Work Time</th>
            <th>Start date</th>
            <th>Pfunddata</th>
        </tr>
    </thead>

        <tbody>
            <tr>
                <td>Mayur Dhameliya</td>
                <td>System Architect</td>
                <td>Ahemdabad</td>
                <td>61</td>
                <td>2018/04/25</td>
                <td>$320,800</td>
            </tr>
            <tr>
                <td>Hitsh Dhameliya</td>
                <td>Devloper</td>
                <td>Jammnagar</td>
                <td>63</td>
                <td>2018/07/25</td>
                <td>$170,555</td>
            </tr>
            <tr>
                <td>Dr Ravi Dhameliya</td>
                <td>Junior Technical Author</td>
                <td>Ram park</td>
                <td>66</td>
                <td>2019/01/12</td>
                <td>$86,989</td>
            </tr>
            <tr>
                <td>Dr Bhavana Ramanai</td>
                <td>Senior Javascript Developer</td>
                <td>Ahemdabad</td>
                <td>22</td>
                <td>2017/03/29</td>
                <td>$433,060</td>
            </tr>
            <tr>
                <td>Ms Sejal Ramanai</td>
                <td>Devloper</td>
                <td>Jammnagar</td>
                <td>33</td>
                <td>2025/11/28</td>
                <td>$162,989</td>
            </tr>
            <tr>
                <td>Mss Kajal Pipaliya</td>
                <td>Integration Specialist</td>
                <td>Surat</td>
                <td>61</td>
                <td>2017/12/02</td>
                <td>$372,989</td>
            </tr>
            <tr>
                <td>mr. Dhrvik Shah</td>
                <td>Sales Assistant</td>
                <td>Ram park</td>
                <td>59</td>
                <td>2017/08/06</td>
                <td>$137,414</td>
            </tr>
            <tr>
                <td>Mr. prtaik shah</td>
                <td>Integration Specialist</td>
                <td>Jammnagar</td>
                <td>55</td>
                <td>2019/10/14</td>
                <td>$327,900</td>
            </tr>
            <tr>
                <td>mr jigar shah</td>
                <td>Javascript Developer</td>
                <td>Ram park</td>
                <td>39</td>
                <td>2019/09/15</td>
                <td>$205,414</td>
            </tr>
            <tr>
                <td>mr Bhoomi savalyia</td>
                <td>Hardware Devloper</td>
                <td>Ahemdabad</td>
                <td>23</td>
                <td>2025/12/13</td>
                <td>$103,600</td>
            </tr>
            <tr>
                <td>mr jignasha Gaines</td>
                <td>Shop ManWork Timer</td>
                <td>Gondal</td>
                <td>30</td>
                <td>2025/12/19</td>
                <td>$90,560</td>
            </tr>
            <tr>
                <td>ms ketan Flynn</td>
                <td>Support Lead</td>
                <td>Ahemdabad</td>
                <td>22</td>
                <td>2022/03/03</td>
                <td>$342,989</td>
            </tr>
            <tr>
                <td>divya Marshall</td>
                <td>Regional Director</td>
                <td>Ram park</td>
                <td>36</td>
                <td>2025/10/16</td>
                <td>$470,600</td>
            </tr>
            <tr>
                <td>chandni Kennedy</td>
                <td>Senior Management Designer</td>
                <td>Gondal</td>
                <td>43</td>
                <td>2017/12/18</td>
                <td>$313,414</td>
            </tr>
            <tr>
                <td>rimple Fitzpatrick</td>
                <td>Regional Director</td>
                <td>Gondal</td>
                <td>19</td>
                <td>2019/03/17</td>
                <td>$385,555</td>
            </tr>
            <tr>
                <td>kavya Silva</td>
                <td>Management Designer</td>
                <td>Gondal</td>
                <td>66</td>
                <td>2017/11/27</td>
                <td>$198,414</td>
            </tr>
            <tr>
                <td>parul Byrd</td>
                <td>Chief Head depart Shopr (HOD)</td>
                <td>Surat</td>
                <td>64</td>
                <td>2019/06/09</td>
                <td>$725,989</td>
            </tr>
            <tr>
                <td>Ram Little</td>
                <td>Systems Administrator</td>
                <td>Surat</td>
                <td>59</td>
                <td>2019/04/10</td>
                <td>$237,414</td>
            </tr>
            <tr>
                <td>Ramesh Greer</td>
                <td>Hardware Devloper</td>
                <td>Gondal</td>
                <td>41</td>
                <td>2017/10/13</td>
                <td>$132,989</td>
            </tr>
            <tr>
                <td>krishna Rios</td>
                <td>Personnel Lead</td>
                <td>Ahemdabad</td>
                <td>35</td>
                <td>2017/09/26</td>
                <td>$217,414</td>
            </tr>
            <tr>
                <td>vidhi Caldwell</td>
                <td>Development Lead</td>
                <td>Surat</td>
                <td>31</td>
                <td>2018/09/03</td>
                <td>$345,989</td>
            </tr>
	</tbody>
    <tfoot>
        <tr>
            <th>Client Name</th>
            <th>Post</th>
            <th>Shop</th>
            <th>Work Time</th>
            <th>Start date</th>
            <th>Pfunddata</th>
        </tr>
    </tfoot>
</table>

Example


Related FAQ

Here are some more FAQ related to this Article:

  1.   Laravel 6 WhereNotIn Query Example
  2.   Show-Hide Password in TextBox with Button using jQuery
  3.   laravel Views share Variable multiple to controller
  4.   jQuery AJAX Inline CRUD using Laravel MySQL
  5.   Angularjs Bar Rating Component and demo
  6.   How to get featured image of a product in woocommerce
  7.   Laravel Eloquent Useful Tips and Tricks
  8.   how to disable previous date in bootstrap datepicker?
  9.   Table Columns Sorting with OrderBy Filter using Angular Example
  10.   jQuery Ajax CRUD operations in Laravel 5.7