How to modify row counts when displaying alphabetized search results

Question

I am using DataTables to create a table that is able to dynamically filter context. I am following the basic example, here.

However, I want to make one customisation: To display alphabetised results in my table, with a "title row" for each alphabet letter. Eg:

A
- Apple
- Avocado
B
- Bear
- Button
C
- Car

I have done this successfully (using Django templating on the server side for the output), but the footer label Datatables shows by default is now incorrect, because it counts the title rows. In the above example it reads:

Showing 1 to 8 of 8 entries 

When it should read:

Showing 1 to 5 of 5 entries.

Digging further, the info result is accessed via the API as "language": {"info": "Showing START to END of TOTAL entries",}.

I have the ability to count and save the header rows as a variable (e.g. var headercount = 3) from my Django template.

How do I modify the START, END, and TOTAL in the DataTables API so that they are accurate on every page when cycled through?

Parlor

Answer 1

SOLUTION #1

You can use infoCallback option to define a function that will be called when table information is about to be displayed.

For example, default behavior can be achieved with the code below.

var table = $('#example').DataTable({
   "infoCallback": function(settings, start, end, max, total, pre){
      return "Showing " + start + " to " + end + " of " + total + " entries"
         + ((total !== max) ? " (filtered from " + max + " total entries)" : "");
   }        
});

You need to adjust the numbers accordingly to avoid counting the headings.

See this jsFiddle for code and demonstration.

SOLUTION #2

Alternative solution would be to use JavaScript and not the static HTML to alphabetize table content, similarly to Row grouping example.

Then information panel would contain correct numbers automatically because header rows are added dynamically as additional nodes that are not counted by DataTables as rows.

See this jsFiddle for code and demonstration.

SOLUTION #3

Use AlphabetSearch plugin which adds support for alphabetical search.

Stretchy