Hi, Callum

Firstly, I would like to sincerely apologize for the delayed response as we have been experiencing an unusually high number of tickets. I am sorry that it has taken longer than usual to respond to your concern and your patience is highly appreciated.

-

I've been searching for a workaround to make a solution as you need it, but despite my best efforts, still unsuccessful.

I will escalate this with our 2nd level Team, to see if they got any workarounds. I was thinking of possibly something with custom JS that would only render on the front page, but, as I mentioned, didn't get it working yet.

Can you tell me, just to check - do you need the column to always show that number sequence only on the front-end page, or is it also important to have it show on the back-end in the WP-Admin plugin editor?

I will report back after more work on this. Thank you for your patience.

Hi, Callum.

I have a custom workaround with a bit of JS script added to any, or all WordPress pages, and this will check if there is a table on the page, and if there is - it will add the row numbers, fixed from 1 > until the last row.

If you change the sorting, filtering, that first column will always have fixed numbers.

The front-end (JS) part of wpDataTables plays a significant role in the plugin’s functionality. Generally, front-end rendering is done by the DataTables jQuery plugin

All wpDataTables existing on the page are reflected in the global JavaScript object called ‘wpDataTables‘. If you check this variable in the JS developer console you will see the wpDataTables as properties of this object. 

What you can do is add one column in your file or data source at the start of the table (as first column), then use this script on the page ( this will work for every "first table on the page", so, for example, if you have multiple, you have to add another script, and change this bit "wpDataTables.table_1.api " to 

" wpDataTables.table_2.api ", for the second table on same page, and so on... :

<script type="text/javascript">
jQuery(window).on('load',function(){ 
 wpDataTables.table_1.api().on( 'order.dt search.dt', function ( e, dt, type, indexes ) {   
   wpDataTables.table_1.api().column(0, {search:'applied', order:'applied'}).nodes().each( function (cell, i) {     
    cell.innerHTML = i+1;    
   } ); 
  } ).draw();
 });
</script>

-

This is just going to render on the front-end,  it will show as empty column at the back-end.

If you need help adding custom JS to WP pages, check this article.

Here is an example i made with a dummy table :

I used this easy plugin that is shown on that article, Insert Headers and Footers plugin,

and i inserted this script to entire WordPress :

also, i added a first column to a table, with empty rows, set it as integer type :

And this is how the table outputs on front end :

That is without any sorting/filtering applied.

and now i revert the sorting on the "Countries" column, but as you can see - the first column stays with the "fixed row numbers" on the front page.

-

Let me know if this will work for you as a solution, and if you have any further questions. Thanks

Hi, Callum

That is a good question, to be honest with you, i didn't test that situation yet.

That does sound as it should work, theoretically. If you can try to add the field as empty and hidden on the Gravity Form side , just set the field type as numeric > and then when you link it during table creation, add this column to the table, when you select all the fields from the Form - set that one as integer;

and try the workaround i sent you.  I know that form plugins can usually have hidden fields, and wpDataTable can still load them.

Let's see , and let me know how it goes

Hey, Callum

I see the other ticket - we will proceed on it regarding filtering.

But once you try this JS trick for other tables, to present the numbering, you can come back to this ticket if it doesn't work for any reason on other tables

It is good that you made a separate ticket for different topics - that makes our support more efficient, and tracking issues.

Let's see how it goes.