Tuesday, June 23, 2015

DataTables seems like a pretty good pagination control for jQuery.

You may use it in an ASP.NET MVC application by making a table and then having a foreach loop in your Razor markup to have a row for each object in your collection. DataTables cleans up what comes up to the browser from being a table with a thousand rows to being a paginated list complete with both sortable headers and First, Previous, Next, and Last buttons. Obviously this means bringing in all the records upfront in what could be a lot of HTML. At a glance I think there may also be some server-side paging capabilities, but I don't know firsthand. I helped a friend with DataTables last night and we removed the numbered buttons in the pagination control in favor of just having the First, Previous, Next, and Last buttons, but tweaking the setting defined here to be:

$(document).ready(function() {
   $('#example').dataTable( {
      "pagingType": "full"
   } );
} );

 
 

...in lieu of:

$(document).ready(function() {
   $('#example').dataTable( {
      "pagingType": "full_numbers"
   } );
} );

 
 

The other settings are "simple" and "simple_numbers" which it would seem are like their "full" and "full_numbers" cousins but without the First and Last buttons in both variations. We needed also to move the pagination control above the record rows from where it sat below by default and I didn't quickly see a canned way to do this in their paradigm so a CSS solution was needed. The controls sit in a div beneath the table of rows and both elements sit one after another inside of another div that wraps them. At first I tried to just move the grid of control upwards with absolute positioning and a negative top-margin, but when one went to the last page of the pagination and there were less records than the norm, this caused a problem and the pagination controls set too high up on the page. I'm not sure how my friend solved it, but I brainstormed an idea after the fact of setting both the table and the div of controls to float in absolute positioning and to just set a fixed height on the div wrapping them both to accommodate for the height of the table. I guess that wouldn't work if one was allowing for the changing of the pagination size. I wonder if my friend kept the pagination size control around or hid it with display:none. We hid the search box with display:none. Fun stuff.

No comments:

Post a Comment