JQueryGrid/DataTable
With Jquery DataTable you can load thousands of records(all at once) in an html table and with faster pagination. It is helpful if you want to fetch all the records only once and display it. The Jquery DataTable is a lightweight component and is useful in situations where you are wanting to have only one server call per page.
$("#myTable").dataTable({
"sDom": '<"header-left-container" l><"header-right-container" f>t<"footer-left-container" i><"footer-right-container" p>'
}).createScrollableTable({
width: '1100px',
height: '400px'
});
Here header-left-container and header-right-container are div classes(Table header)
and footer-left-container and footer-right-container are div classes(Table footer)
sDom: This initialisation variable allows you to specify exactly where in the DOM you want DataTables to inject the various controls it adds to the page (for example you might want the pagination controls at the top of the table). DIV elements (with or without a custom class) can also be added to aid styling
sDom: parameters Meaning
l->length control
i->Information
p->pagination control
f->filtering control
createScrollableTable will help you to have fixed length html table with horizontal and vertical scrolling to the provided height and width