"Bootstrap 3.7 Responsive Datatable (Server Side)"
Bootstrap 3.3.0 Snippet by ggamigo

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- Data table plugin CSS--> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css" /> <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.1.1/css/responsive.bootstrap.min.css" /> <div class="container"> <div class="row mb-4"> <h2 class="text-center">Bootstrap 3.7 styling for Responsive Datatable (Server Side)</h2> </div> <div class="row"> <div class="col-md-12"> <table id="table_data" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%"> <thead> <tr> <th> Name </th> <th> Position </th> <th> Office </th> <th> Code </th> <th> Start date </th> <th> Salary </th> <th> Action </th> </tr> </thead> </table> </div> </div> </div> <script language="JavaScript" src="https://code.jquery.com/jquery-1.12.4.js" type="text/javascript"></script> <script language="JavaScript" src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js" type="text/javascript"></script> <script language="JavaScript" src="https://cdn.datatables.net/1.10.13/js/dataTables.bootstrap.min.js" type="text/javascript"></script> <script language="JavaScript" src="https://cdn.datatables.net/responsive/2.1.1/js/dataTables.responsive.min.js" type="text/javascript"></script> <script language="JavaScript" src="https://cdn.datatables.net/responsive/2.1.1/js/responsive.bootstrap.min.js" type="text/javascript"></script> <script type="text/javascript" src="custom.js"></script>
var data = [ { "name": "Ashiful Islam", "position": "Web Developer", "salary": "$520,100", "start_date": "2016/04/25", "office": "Bangladesh", "extn": "6250" }, { "name": "Shakil Ahamad", "position": "Accountant", "salary": "$270,750", "start_date": "2010/05/22", "office": "Rajshahi", "extn": "1234" }, { "name": "Nadim Abrar Hossain", "position": "Junior Technical Author", "salary": "$96,000", "start_date": "2009/01/12", "office": "London", "extn": "1420" }, { "name": "Alsafe Bhiya", "position": "Senior Javascript Developer", "salary": "$433,060", "start_date": "2012/03/29", "office": "India", "extn": "6224" }, { "name": "Zillu Rahaman", "position": "Software Developer", "salary": "$1620,700", "start_date": "2018/11/28", "office": "Tokyo", "extn": "8080" }, { "name": "Ashiful Islam", "position": "Web Developer", "salary": "$520,100", "start_date": "2016/04/25", "office": "Bangladesh", "extn": "6250" }, { "name": "Shakil Ahamad", "position": "Accountant", "salary": "$270,750", "start_date": "2010/05/22", "office": "Rajshahi", "extn": "1234" }, { "name": "Nadim Abrar Hossain", "position": "Junior Technical Author", "salary": "$96,000", "start_date": "2009/01/12", "office": "London", "extn": "1420" }, { "name": "Alsafe Bhiya", "position": "Senior Javascript Developer", "salary": "$433,060", "start_date": "2012/03/29", "office": "India", "extn": "6224" }, { "name": "Zillu Rahaman", "position": "Software Developer", "salary": "$1620,700", "start_date": "2018/11/28", "office": "Tokyo", "extn": "8080" }, { "name": "Ashiful Islam", "position": "Web Developer", "salary": "$520,100", "start_date": "2016/04/25", "office": "Bangladesh", "extn": "6250" }, { "name": "Shakil Ahamad", "position": "Accountant", "salary": "$270,750", "start_date": "2010/05/22", "office": "Rajshahi", "extn": "1234" }, { "name": "Nadim Abrar Hossain", "position": "Junior Technical Author", "salary": "$96,000", "start_date": "2009/01/12", "office": "London", "extn": "1420" }, { "name": "Alsafe Bhiya", "position": "Senior Javascript Developer", "salary": "$433,060", "start_date": "2012/03/29", "office": "India", "extn": "6224" }, { "name": "Zillu Rahaman", "position": "Software Developer", "salary": "$1620,700", "start_date": "2018/11/28", "office": "Tokyo", "extn": "8080" }, { "name": "Ashiful Islam", "position": "Web Developer", "salary": "$520,100", "start_date": "2016/04/25", "office": "Bangladesh", "extn": "6250" }, { "name": "Shakil Ahamad", "position": "Accountant", "salary": "$270,750", "start_date": "2010/05/22", "office": "Rajshahi", "extn": "1234" }, { "name": "Nadim Abrar Hossain", "position": "Junior Technical Author", "salary": "$96,000", "start_date": "2009/01/12", "office": "London", "extn": "1420" }, { "name": "Alsafe Bhiya", "position": "Senior Javascript Developer", "salary": "$433,060", "start_date": "2012/03/29", "office": "India", "extn": "6224" }, { "name": "Zillu Rahaman", "position": "Software Developer", "salary": "$1620,700", "start_date": "2018/11/28", "office": "Tokyo", "extn": "8080" } ] $(document).ready(function () { $('#table_data').DataTable({ "processing": true, "info": true, "stateSave": true, data: data, "columns": [ { "data": "name" }, { "data": "position" }, { "data": "office" }, { "data": "extn" }, { "data": "start_date" }, { "data": "salary" }, { "data": "Inquiry", "bSearchable": false, "bSortable": false, "sWidth": "40px", "data": function (data) { return '<button class="btn btn-danger" type="button">' + data.name + ' Delete </button>' } } ] }); }); // Server Side Call using Url //var table = $('#table_data').DataTable({ // //"responsive": true, // "processing": true, // "serverSide": true, // "info": true, // "stateSave": true, // "lengthMenu": [[10, 20, 50, -1], [10, 20, 50, "All"]], // "ajax": { // "url": "/DatatableAdvance/AjaxGetJsonData", // "type": "GET" // }, // "columns": [ // { // "className": 'details-control', // "orderable": false, // "data": null, // "orderable": true, // "defaultContent": '' // }, // { // "data": "Inquiry", "orderable": false, // "data": function (data) { // return '<input type="hidden" id="hiddenTextInquiry" name="hiddenTextInquiry" value="' + data.InquiryId + '">' + data.InquiryId // } // }, // { "data": "ReferencesDetails", "orderable": false }, // { "data": "ReferencesNumber", "orderable": true }, // { "data": "Remark", "orderable": true }, // { "data": "TelephoneNumber", "orderable": true }, // { "data": "Date", "orderable": true }, // { // "data": "Inquiry", "bSearchable": false, "bSortable": false, "sWidth": "40px", // "data": function (data) { // return '<button class="btn btn-danger" type="button">' + data.InquiryId + 'Delete</button>' // } // } // ], // "order": [[0, 'asc']] //});

Related: See More


Questions / Comments: