<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.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']]
//});
