Alphabet search with Ajax populated DataTable

jdadwilson

I need to implement an alphabet search on a table that is populated from a mySql query by an Ajax source. Does anyone have a good example. TIA for any assistance.

jdadwilson

allan

Try calling its alphabetSearch.recalc() method in initComplete. If that doesn't work, a link to the page you are working on would be useful.

Allan

jdadwilson

Tried your suggestion. Didn't work.

Received error: Uncaught ReferenceError: alphabetSearch is not defined

Here is link: http://www.txfannin.org/new-site/familypages.php

jdadwilson

allan

Its an API method you need to use this.api.alphab....

Allan

jdadwilson

I modified the .js file to load the table without some of the initialization parameters. I now get the error: DataTables warning: ... Requested unknown parameter '0' from row 0.

This link will display an html table:
http://www.txfannin.org/new-site/familypages.php

This link gives the error when loading an ajax table:
http://www.txfannin.org/new-site/familypages_v1.php

TIA for your assistance
jdadwilson

allan

http://www.txfannin.org/new-site/familypages_v1.php

I'm not seeing any errors on the page I'm afraid. Indeed DataTables doesn't even appear to be initialised. Can you show me the code where it should be?

Allan

jdadwilson

My Bad... Forgot to upload one of the files.

Here is the initialization code:

function initTable() {
    "use strict";
    // Initialize the dataTable
    var table = $('#table_FamilyPages').DataTable( {
        ajaxSource: 'files_ajax/ajax_FamilyPages.php',
        paging: true,
        paginationType: 'full_numbers',
        language: { "paginate": { "previous": "Prev" } },        
        dom: 'Alfrtip',
        
        initComplete: function() {
            //chkTableLength(sRecords);
            this.Api.alphabetSearch.recalc();
        } // End of fnInitComplete     } );

Thanks for your assistance
jdadwilson

allan

Your columns array defines two columns:

columns: [
            { data: 'fam_name_short', className: 'udatal', visible: true },
            { data: 'fam_id',         className: 'udatar', visible: true }
        ]

However, your HTML defines 3. They need to match.

Allan

jdadwilson

The column reference you mentioned is in a commented section I think. Not at home now, at hospital visiting my wife.

Thanks,
jdadwilson

jdadwilson

The column definitions were in a commented section BUT it appears that when using an ajax source the column definitions are required in the initialization. Moving the definitions now makes the table display with no errors.

But, the initial problem with the alphabetSearch coding still remains... the alpha links do not get initialized.

Link to page... http://www.txfannin.org/new-site/familypages_v1.php

jdadwilson

allan

ajax source the column definitions are required in the initialization.

Not always - but typically yes. Particularly if you use objects as the data source for the rows.

You are using DataTables 1.10.2 - could you update to 1.10.11, which is the current release please. Hopefully that will resolve the issue.

Allan

jdadwilson

Not sure what problem the upgrade to version 1.10.11 was suppose to resolve. The problem with the alphabetSearch feature still exists.

Link to page... http://www.txfannin.org/new-site/familypages_v1.php

jdadwilson

allan

I had thought there was an API extension bug, but actually I see now the issue is:

this.api.

It should be:

this.api().

i.e. api is a function you need to call.

Allan

jdadwilson

I assume you are referring to the line in the intiComplete function. Still does not initialize the alphabetSearch string.

Link to page... http://www.txfannin.org/new-site/familypages_v1.php

jdadwilson

allan

I'm sorry I wasn't clear - when I said this.api. should be this.api(). - I didn't mean remove the rest of the line. The api() function must be called so it gets the API. Then you need to actually use the API function.

Allan

jdadwilson

Just to be clear the line should be... this.api().alphabetSearch.recalc();
I apologize for being so dense. I tend to revert back to my FORTRAN 2 days.

I'll try this tonight when I get home.

Thanks for all of your assistance.
jdadwilson

jdadwilson

I added the this.api().alphabetSearch.recalc(); code to the initComplete function as follows.

        initComplete: function() {
            this.api().alphabetSearch.recalc();
            chkTableLength(sRecords);
        } // End of initComplete

The table displays correctly, but the alphabet letters are all initialized as 'empty' with a '0' value.

I am sure it is something simple/stupid but I do not know enough about javaScript to determine the nature of the problem.

TIA for your assistance
jdadwilson

allan

Not your fault at all - you've actually just encountered a bug in the alphabet search extension unfortunately. It is recalculating the display, but because your data has HTML links in it, the alphabet search is finding the first character in your data to always be <!

That's obviously nonsense! I've just committed the fix and the latest version of the Alphabet plugin should allow this to finally work as expected :-).

Allan

jdadwilson

U da man!!! That did the trick. Thanks again for a great and useful product and support. I have several more places throughout my site where I will use the alphabetSearch.

http://www.txfannin.org/new-site/familypages.php

jdadwilson