<head>
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/datatables/css/dataTables.bootstrap.css" rel="stylesheet" />
</head>
<body>
<table id="Mytable"
class="table table-striped
table-bordered" cellspacing="0" width="100%">
<thead>
<tr>
<th>
</th>
</tr>
</thead>
<tbody>
@foreach (var item in Model)
{
<tr>
<td>
@Html.DisplayFor(modelItem => item.ProductName)
</td>
</tr>
}
</tbody>
</table>
</body>
<script src="~/Scripts/jquery-2.1.3.min.js"></script>
<script src="~/Scripts/DataTables/jquery.dataTables.js"></script> @*1.10.11*@
<script src="~/Scripts/DataTables/dataTables.bootstrap.js"></script>
</html>
<script type="text/javascript">
$(function () {
$("#Mytable").DataTable({
"bStateSave": true,
"aLengthMenu": [[3, 5, 10, 15, 20, 50, -1], [3, 5,
10, 15, 20, 50, "All"]]
//sPaginationType:
"full_numbers"
// "paging":
false,
// "ordering": false,
// "info": false,
// scrollY: 300
});
$('#Mytable tbody').on('click', 'tr', function () {
var table = $('#Mytable').DataTable();
var id = table.row(this).id();
alert('Clicked row id ' + id);
});
});
</script>
1. TO MAKE THE DATATABLE RESPONSIVE
A. <table id="Mytable" class="table
table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">
B.
<head>
<link href="~/Content/datatables/css/responsive.bootstrap.css" rel="stylesheet" />
</head>
C.
</table>
</body>
<script src="~/Scripts/DataTables/dataTables.responsive.js"></script>
<script src="~/Scripts/DataTables/responsive.bootstrap.js"></script>
</html>
OR BY USING CONFIGURATION OPTION
$(document).ready(function () {
$('#example').DataTable({
responsive: true
});
});
The third way of initialising Responsive is manually creating a new instance using the
$.fn.dataTable.Responsive class i.e $(document).ready(function() { var table = $('#example').DataTable(); new $.fn.dataTable.Responsive( table );} ); ALSO IN CASE OF USING JQUERY DATATABLES PAGING
// $(".showEdit").click(function (e) {
//ABOVE WILL NOT WORK, SO use this below syntax in case of using Datatable paging
$("#Mytable").on("click",".showEdit",function (e) {
e.preventDefault();
var urldest = $(this).attr("href");
var pid = $(this).attr("id");
$.ajax({
url: urldest,
data: { id: pid },
success: function (data) {
$("#myModalContent").html(data);
$.validator.unobtrusive.parse("#frmEdit");
$('#myModal').modal('show');
}
});
});
<input type="button"
value="Next" id="nextPageBtn"/>
<input type="button" value="Previous" id="previousPagebtn" />
// Custom paging controls for next / previous pages:
var table = $('#example').DataTable();
$('#nextPageBtn).on( 'click', function () {
table.page( 'next' ).draw( 'page' );
});
$('#previousPagebtn).on('click', function () {
table.page( 'previous' ).draw( 'page' );
} );
0 comments:
Post a Comment