Pro-Tech-Friend

Datatable will not have focus by default, we need to set the focus on datatable by using below code, <script src="~/Scripts/js/core/libraries/jquery.min.js"></script> <script type="text/javascript" src="~/Scripts/js/plugins/tables/datatables/datatables.min.js"></script> <script src="~/Scripts/js/plugins/tables/datatables/extensions/key_table.min.js"></script> //make sure you have included KeyTable plugin $(document).ready(function () { // initialise your datatable here, after that we are ready to set focus on datatable so that we can use arrow key for navigation like excel var table = $('#PurchaseorderList').DataTable(); table.cell(':eq(0)').focus(); table.cell(':eq(0)').click(); });

If we have huge data to bind to Jquery Datatble, server side data binding is a handy option. As we can fetch a set of records and bind only those at time. Further next set of records can be retrieved when requested. e.g, if we have a page size set to 10 records in Datatable, it is a good choice to load only first 10 records in the datatable, when user click on "2" in pagination, we can retrieve 11-20 i.e, next 10 records from database and display in datatable. This will increase noticeable performance for datatable. So let's dive in how we can achieve this, <script src="~/Scripts/js/core/libraries/jquery.min.js"></script> <script type="text/javascript" src="~/Scripts/js/plugins/tables/datatables/datatables.min.js"></script> <script src="~/Scripts/js/plugins/tables/datatables/extensions/key_table.min.js"></script> <!-- here I am using KeyTable (A datatable extension) to navigate through...