I have a table that shows a queried list of posts, and I'm trying to capture the numerical-order value of each row in the table. For example, if a table has ten rows, I need to get the order number of each post (rows 1-9, excluding the first/top/header row).
This value is needed for another function that generates a location map based on the lat/lon coordinates associated with each post, and all markers need to be labeled (i.e. 1-9) according to where each location is listed on the table.
My first thought was to create a new column with static values, but obviously that won't work if a user on the frontend resorts or filters-out some of the rows.
Is there a way to append the table with a column that counts and assigns a numeric value of all rows below the header, and updates the value whenever the table is re-sorted or rows are removed on the frontend?
If I understood correctly that is not possible with built-in features.
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 to add one more column in your file or data source on the first spot then use this script on the page
<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>
Please note that this will work only for non server-side tables.
For serverside tables (manual) you have wdt_ID column which is auto-increment column from wpDatatables created for crud functionality and (SQL based) tables where you can add one more column that will be autoincrement.
If I misunderstood please provide us with some more details or an example of your usecase so we can get a better understanding and provide you with the best solution.
Thank you for the feedback Blaženka. Can you elaborate on how to create an auto-incremental column? The table in question is server-side and generated by WP query.
Also, can you tell me which file/function generates the wdt_id?
I tested the script you provided with a new table using frontend processing, but the column values remain empty when sorted. Please let me know if these steps are correct...
Created new postmeta key with empty (not null) values
Created a new table via WP query with multiple columns including the new "SPOTID" column in first position
Assigned Data > ColumnType as Integer for "SPOTID" column
Added the script to the page template where the table is displayed
Tested with column hidden, column visible; no results
Changed the script to table_11 (new table ID) and retested; still no results
This was a script to simulate that index column (we don't have a built in option). It works only for non serverside tables. So when you create a table from a query you have to turn off the serverside option. This is a custom solution so it has to be adapted for other plugin functionalities such as sorting, responsive, row grouping and others. The first column will be overwritten with the index column values.
I have a table that shows a queried list of posts, and I'm trying to capture the numerical-order value of each row in the table. For example, if a table has ten rows, I need to get the order number of each post (rows 1-9, excluding the first/top/header row).
This value is needed for another function that generates a location map based on the lat/lon coordinates associated with each post, and all markers need to be labeled (i.e. 1-9) according to where each location is listed on the table.
My first thought was to create a new column with static values, but obviously that won't work if a user on the frontend resorts or filters-out some of the rows.
Is there a way to append the table with a column that counts and assigns a numeric value of all rows below the header, and updates the value whenever the table is re-sorted or rows are removed on the frontend?
Hi Ryan
Thank you for reaching out to us.
If I understood correctly that is not possible with built-in features.
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 to add one more column in your file or data source on the first spot then use this script on the page
<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>Please note that this will work only for non server-side tables.
For serverside tables (manual) you have wdt_ID column which is auto-increment column from wpDatatables created for crud functionality and (SQL based) tables where you can add one more column that will be autoincrement.
If I misunderstood please provide us with some more details or an example of your usecase so we can get a better understanding and provide you with the best solution.
Thank you for the feedback Blaženka. Can you elaborate on how to create an auto-incremental column? The table in question is server-side and generated by WP query.
Also, can you tell me which file/function generates the wdt_id?
Hi Blaženka,
I tested the script you provided with a new table using frontend processing, but the column values remain empty when sorted. Please let me know if these steps are correct...
Am I missing something here?
FYI, I searched through the DataTables docs and found exactly what I'm looking for under Index/Counter Columns - https://datatables.net/examples/api/counter_columns.html. Is this method available with wpDataTables?
Hi Ryan
I have forwarded this to our developers as they will be able to provide a more accurate answer. I will update you as soon as I hear back from them.
We appreciate your time and patience.
Hi Ryan
Thank you for your patience.
This was a script to simulate that index column (we don't have a built in option). It works only for non serverside tables. So when you create a table from a query you have to turn off the serverside option. This is a custom solution so it has to be adapted for other plugin functionalities such as sorting, responsive, row grouping and others. The first column will be overwritten with the index column values.