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

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...

Keyboard driven menu in Jquery

I had a requirement to operate menu with keyboard just like we do in windows application. Traverse through menus using left/ right arrow keys, up/ down arrow keys should work as well. Further user should be able to navigate when Enter key is pressed. I was not able to find any jquery plugin to use for this purpose until I got this one,  https://hanshillen.github.io/jqtest/#goto_menubar This is what exactly I was looking, thanks a ton to the author. But later I realized it is not that easy to get just menu out of this. So I need to play with it and finally got it working. I am sharing code here so that if anyone ever need such type of menu it will be a quick one. This functionality is created by original author @Hans Hillen , I am just providing this code for simplicity. Download @  http://jmp.sh/Z3AtfVv