Added a class to the li following the text

max39

Hello I work locally, I encounter a problem to add a class.
I try to add a class to the li, following the text inside but nothing helps I can't reach it.

==============================================================================
<td>
<ul class="bulleted">
<li>On foot</li>
</ul>

</td>

I'm looking to have something like this:

==============================================================================
<td>
<ul class="bulleted">
<li class="classOnFoot">On foot</li>
</ul>
</td>

<td>
<ul class="bulleted">
<li class="classCreature">Creature</li>
</ul>
</td>

==============================================================================

I tried this:

$(document).ready(function() {
var table = $('#DataTables_Table_0').DataTable();
table.rows().every( function () {
if ( $('.bulleted > li').text() === 'On foot' ) {
$('.bulleted > li').addClass('TEST');
}
} );
} );

kthorngren

Use createdRow or columns.createdCell to add the class. See the docs for examples.

Kevin

max39

I can't get anything I just tried this:

====================================
$(document).ready(function() {
$('#DataTables_Table_0').dataTable( {
"columnDefs": [ {
"targets": 3,
"createdCell": function (td, cellData, rowData, row, col) {

                            if ( cellData == "On foot" ) {
                                $(row).addClass( 'important' );
                              }

                          },

                        } ]
                      } );
                } );

====================================

I've been testing your examples for a while but I'm confused I'm using datatables in Gravity view and it uses Ajax for search.
I've tried your examples so much that I don't even know how to do anything

kthorngren

The cell data is not the text but the ul. You need to use jQuery to find the li, similar to your original code, then compare the li text. See this example:
http://live.datatables.net/jijuwoci/1/edit

Kevin

max39

Your example works for you but unfortunately not for me in any case a superb example, it is very clear!

I wonder how to do with AJAX I think it's him who makes that I can not make it work

kthorngren

The data source shouldn't matter. You can debug the columns.createdCell function to see what values you have for the td and other parameters. If you still need help please post a link to your page or a test case with a sample of your data so we can help debug.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

max39

Could it be from the position of the srcipts?

Example above, my personal script is ID: customjs-js

The DataTables script is below, the cause?

kthorngren

If your Datatables is working in general then the problem is not with the script order. You need to look at the data for that column. Maybe the structure is different than you posted above. Use console.log statements in the columns.createCell function or the browser's debug to see what the values of the function parameters are.

Kevin

max39

I have set a console.log (li); under the variable li.
I am absolutely nothing.

So I just positioned my script sheet at the very bottom of the JS. Now it's under the DataTables JS and I have this:

I do not know what to do anymore ^^

kthorngren

So I just positioned my script sheet at the very bottom of the JS. Now it's under the DataTables JS and I have this:

Sounds like you are trying to initialize Datatables more than once. Did you read the information at the link provided in the error, it tells you what to do?
https://datatables.net/manual/tech-notes/3

Sounds like you need to put the order back. As I said that is not the problem.

I have set a console.log (li); under the variable li.

The li is not one of the parameters passed into the function. As I said look at the td parameter. See this example:
http://live.datatables.net/jijuwoci/3/edit

Your data must be different than what you posted above and the example I created. You will need to find out what the actual data is to use jQuery to find the values you want.

I do not know what to do anymore ^^

Please post a link to your page or build a test case showing the issue so we can help debug. Otherwise we are just guessing at what you have.

Kevin

max39

Finally I found a solution for those who come across this POST just play with the Gravity View merge tags by creating a custom field, you can add div, p, etc. as you see fit and DataTables works perfectly without having touched it in JS!