In this example we are giving you data table shorting with bootstrap 4. in this datatable demo you do search,pagination,next,previous and you can change show record. we can do some custom design change in this datatable. this is the simple example of datatable. in jquery we are use simple DataTable() function and table id. in this demo you can use the latest vaesion of jquery file.

We allows to free snippets of datatable example , you can download full code of datatable bootstrap 4 layout. Here in this post i will give you example of bootstrap 4 sortable table snippet and you will get simple code of html, css and jquery. In bootstrap datatable example code snippet i give you three tab with html, css and js, you can easily get code of datatables jquery plugin layout.


<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.3/css/bootstrap.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.9.4/css/jquery.dataTables.min.css" /> <script src="https://code.jquery.com/jquery.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.9.3/jquery.dataTables.min.js"></script> </head> <body> <div class="container main-section"> <div class="row"> <div class="col-md-12 col-sm-12 col-xs-12"> <h1 class="text-center">Table Shorting Demo</h1> <table id="demo_datatables" class="table table-bordered"> <thead> <tr> <th>Order Id</th> <th>Item</th> <th>Qty</th> <th>Price</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>Item 1</td> <td>1</td> <td>100</td> </tr> <tr> <td>2</td> <td>Item 2</td> <td>3</td> <td>200</td> </tr> <tr> <td>3</td> <td>Item 3</td> <td>7</td> <td>250</td> </tr> <tr> <td>4</td> <td>Item 4</td> <td>2</td> <td>500</td> </tr> <tr> <td>5</td> <td>Item 5</td> <td>1</td> <td>100</td> </tr> <tr> <td>6</td> <td>Item 6</td> <td>3</td> <td>200</td> </tr> <tr> <td>7</td> <td>Item 7</td> <td>7</td> <td>250</td> </tr> <tr> <td>8</td> <td>Item 8</td> <td>2</td> <td>500</td> </tr> <tr> <td>9</td> <td>Item 9</td> <td>2</td> <td>100</td> </tr> <tr> <td>10</td> <td>Item 10</td> <td>3</td> <td>200</td> </tr> <tr> <td>11</td> <td>Item 11</td> <td>7</td> <td>250</td> </tr> <tr> <td>12</td> <td>Item 12</td> <td>2</td> <td>500</td> </tr> </tbody> </table> </div> </div> </div> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/tablesort/1.6.1/tablesort.min.js"></script> </body> </html>
body{ background-color: #f1f1f1 !important; } .main-section{ margin-top:20px; } .main-section h1{ margin-bottom: 20px; } .dataTables_wrapper{ padding: 40px 20px; } .dataTable,.paging_two_button,.dataTables_info{ margin:10px 0px !important; }
$(document).ready(function () { var table = $('#demo_datatables').DataTable(); });

Please Subscribe Your Email Address, We Will Notify You When Add New Snippet:





Random Post