row selection not visible
row selection not visible
lucasys
Posts: 1Questions: 1Answers: 0
Goodmorning everyone. I'm doing some tests with datatable inserted in asp.net MVC and everything ok. But the selection of the row does not appear. I tested more examples of the manual , bat nothing works the rows wasn't selectable.
Thanks for your help.
Luca
Include this code:
bundles.Add(new ScriptBundle("~/bundles/datatable").Include(
"~/Content/DataTables-1.10.13/media/js/jquery.dataTables.min.js",
"~/Content/DataTables-1.10.13/select/1.2.1/js/dataTables.select.min.js",
"~/Content/DataTables-1.10.13/keytable/2.2.0/js/dataTables.keyTable.min.js",
"~/Content/DataTables-1.10.13/media/js/dataTables.bootstrap.min.js",
"~/Content/DataTables-1.10.13/extensions/Buttons/js/dataTables.buttons.min.js",
"~/Content/DataTables-1.10.13/extensions/Buttons/js/buttons.bootstrap.min.js",
"~/Content/jszip/jszip.min.js",
"~/Content/pdfmake/0.1.18/build/pdfmake.min.js",
"~/Content/pdfmake/0.1.18/build/vfs_fonts.js",
"~/Content/DataTables-1.10.13/extensions/Buttons/js/buttons.html5.min.js",
"~/Content/DataTables-1.10.13/extensions/Buttons/js/buttons.print.min.js",
"~/Content/DataTables-1.10.13/extensions/Buttons/js/buttons.colVis.min.js"
));
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.css",
"~/Content/site.css",
"~/Content/iconsCastom.css",
"~/Content/DataTables-1.10.13/media/css/jquery.dataTables.min.css"));
view:
<div style="width:90%; margin:0 auto;">
<table id="myTable">
<thead>
<tr>
<th>
@Html.DisplayNameFor(model => model.Name)
</th>
<th>
@Html.DisplayNameFor(model => model.Note)
</th>
<th>
@Html.DisplayNameFor(model => model.Plate)
</th>
<th>
@Html.DisplayNameFor(model => model.Model)
</th>
</tr>
</thead>
</table>
</div>
<style>
tr.even {
background-color:#00FF99 !important;
}
</style>
@* Load datatable css *@
<script>
$(document).ready(function () {
$('#myTable').DataTable({
//"processing": true,
//"serverSide": true,
"ajax": {
"url": "/Vehicles/loaddata",
"type": "GET",
"datatype": "json"
},
select: true,
"columns": [
{ "data": "Name", "autoWidth": true },
{ "data": "Note", "autoWidth": true, visible: false },
{ "data": "Plate", "autoWidth": true, visible: false },
{ "data": "Model", "autoWidth": true }
]
});
table.rows({ selected: true });
table.columns({ selected: true });
table.cells({ selected: true });
});
</script>
This discussion has been closed.