Materialize Datatables Example – Material DataTables

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

  check if folder exists before create directory Laravel

Leave a Reply

avatar
  Subscribe  
Notify of