Skip to main content

Jquery Datatable with Keytable setting focus

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();

  });

Comments

Popular posts from this blog

Union in Entity Framework

There are certain points we need to take into consideration while performing UNION in Entity Framework. This is an easier way to get entities with different queries and then use Union. As shown in below example, where we are using Union to get result from Texas and Florida states. var floridaEntity = ctx.Orders.Where(o => o.State == "Florida").Select(o => o); var TexasEntity = ctx.Orders.Where(o => o.State == "Texas").Select(o => o); var floridaTexas = floridaEntity.Union(TexasEntity); Another way to use Union is shown below, (from p in Tblpages join pa in Tblpageactions on p.PageId equals pa.PageId join rp in Tblrolepermissions on pa.ActionId equals rp.ActionId into jrs from jrResult in jrs.DefaultIfEmpty() where jrResult.RoleId == 1 select new {

Jquery Datatable server side Paging/ Search/ Sort

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