Materialize Datatables Example – Material DataTables

Ajax It JavaScript jQuery Technology

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 5.8 get ip address
  2.   Laravel Server Side Individual Column Filtering
  3.   ASP.NET Ajax Control Tutorial with Examples
  4.   jQuery Validate Multiple File Image Upload validation
  5.   Angular 9/8/7 ngFor Directive Example
  6.   JQuery Include Header and Footer in HTML
  7.   Filter Table Columns using Angular Example
  8.   Dynamically Add Or Remove DropDownLists using jQuery
  9.   AngularJS Fancybox Popup Simple Example
  10.   PHP AJAX Live Search Box Autocomplete Using MySQL Database

Leave a Reply

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