DataTables Alphabet Bar

jdadwilson

I am a long-time enthusiastic user of DataTables. I have a content-heavy website with an extensive back-end used to maintain the content.

Each table (60+) in the Db has an associated module used to update the records in the table. Each module consists of a form and a datatable containing the records. Selecting a row from the datatable moves the record elements into the form fields for editing. Selecting an 'Edit' button updates the record in the Db and the datatable is also updated.

But, my issue is this... If I have a datatable with no records for the letter 'P' then the letter 'P' in the alpha bar is 'disabled' and the record count for the letter is '0'. All well and good. But, when I add a record that would go into the 'P' area the record gets added to the datatable but the 'P' stays disabled and the 'P' count is still '0'.

So, my questions is... is there a way to force the redraw of the alpha bar to thus show the 'P' as active with a updated count?

TIA for any assistance.
jdadwilson

tangerine

You asked a related question previously, when Colin asked you to provide a test case.
https://datatables.net/forums/discussion/64580

A test case is the best way to progress this.

jdadwilson

As with the aforementioned issue, I am not able to provide a 'test' case given that the issue occurs in the Admin area that is restricted to users only.

What I could do is provide screen shots of the process which would give a visual understanding of the situation. Let me know if you think this would help address the issue.

jdadwilson

kthorngren

If I have a datatable with no records for the letter 'P' then the letter 'P' in the alpha bar is 'disabled' and the record count for the letter is '0'. All well and good. But, when I add a record that would go into the 'P' area the record gets added to the datatable but the 'P' stays disabled and the 'P' count is still '0'.

How are you adding the record?

Sounds like you aren't using Datatables API's, like row.add(), to add the record. In this case you will need to use row().invalidate() or rows().invalidate(). See this FAQ for more info.

If you still need help then we will need to see a test case so we know what you are doing. It doesn't need to be the full solution. It can use fake data but just needs to show how you are adding records.

Kevin

jdadwilson

Kevin, thanks for your reply. To be totally honest, I am not exactly sure how the record gets 'reloaded' into the table after an 'Add' or 'Edit' submit. The following is the table definition for one of my tables.

oTable = $('#adminTable').DataTable( {
    ajaxSource: 'files_ajax/ajax_AnyPageText.php',
    columns: [ { data: 'txt_script',    className: 'udatal', orderable: true,  visible: true },
             { data: 'txt_script_id', className: 'udatal', orderable: true,  visible: true },
             { data: 'txt_id',        className: 'udatar', orderable: true,  visible: true },
             { data: 'txt_text',      className: 'udatal', orderable: false, visible: false } ],
    dom: 'A<"top"lf>rt<"bottom"pi><"clear">',
    language: { 'paginate': { 'previous': 'Prev' } },
    lengthMenu: [15, 30, 60],
    order: [],
    paging: true,
    pagingType: 'full_numbers',
    select: { style: 'single', info: false },
    initComplete: function() { doHideAlphaLtrs( this, oTable ); },
    drawCallback: function() { doHideInfoAreas( this ); }
});

The two functions in the initComplete and drawCallback are ones I wrote that hide the AlphaBar and the info area of the dataTable if the number of records in the table are less than the first entry of the lengthMenu. From a UI standpoint it seems a little ridiculous to display these if they don't provide useful information. But I digress.

What I do know is how the record gets updated in the database. With the form submit, the fields from the form are serialized and passed to a routine that builds the appropriate mySQL (Insert, update, delete) string for execution. The record gets updated in the Db and the updated information 'magically' (for me) appears in the dataTable.

But, if the 'new' record begins with a letter that was not previously 'enabled' the letter, after the record appears in the table, remains 'disabled' but not really. Selecting the 'disabled' letter will display the record just as if the 'letter' was enabled. But no count above the letter.

I'm sure there is probably a way through the use of dataTables that the information from the table/form could be used to update the Db. But, given that I have multiple sites with in excess of 40-60 Db tables each and the routines that I use have worked for the past 12 years, I am very reluctant to make any changes to the structure.

I am fairly sure that there is probably just something very simple that I could add to the table definition (maybe in a callback) that would cause the Alphabet bar to refresh with the updated info. I just don't have the understanding of dataTables to figure it out.

Thanks for your willingness to help
jdadwilson
www.txfannin.org & www.msholmes.org

colin

It would be worth considering using Editor here, as it will keep the client and the DB in sync,

Colin

kthorngren

With the form submit, the fields from the form are serialized and passed to a routine that builds the appropriate mySQL (Insert, update, delete) string for execution.

You need to look at the code that does this. It is sending a request to the server with the update. The server provides a response. Sounds like the response contains the updated data which is then applied to the Datatable.

Kevin

jdadwilson

Yes, you are correct. After the mySQL action is completed there is this line of code...

oTable.ajax.reload(null, false);

Remember I said I wrote this 12 years ago!

So, this does refresh the table, but what can I do to also refresh the Alphabet bar?

I changed the reload false to true, but no difference.

Again, thanks for your assistance.
jdadwilson

jdadwilson

Colin... I totally LOVE dataTables and use it extensively on the front-end side of my websites and exclusively on the admin side to maintain the content of the sites. BUT, what I am doing works (except for the quirk with the alphabet bar).

The problem, as I see it, with the dT editor is that what I load into the table is only a small part of the total record for any given table. One table contains over 40 fields several of which have over 1K of associated text. Using the editor would be a nightmare for the users.

Given that I have about 70 table definitions each for 2 websites it would be a major undertaking to do a conversion. With my present method I can add a new Db table and have it functional with NO new mySQL queries required and a simple Db definition.

Again, thanks for a great product.
jdadwilson

allan

The alphabet plug-in add a alphabetSearch.recalc() method to the DataTables API, so if you are changing the data in the table and want it to recompute based on the new content you would call that method on the table(s).

Allan

colin

Here's an example with that recalc(),

Colin