Added a class to the li following the text

Added a class to the li following the text

max39max39 Posts: 6Questions: 1Answers: 0

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');
}
} );
} );

Answers

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,734

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

    Kevin

  • max39max39 Posts: 6Questions: 1Answers: 0
    edited February 2021

    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

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,734

    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

  • max39max39 Posts: 6Questions: 1Answers: 0

    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

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,734

    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

  • max39max39 Posts: 6Questions: 1Answers: 0

    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?

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,734

    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

  • max39max39 Posts: 6Questions: 1Answers: 0

    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 ^^

  • kthorngrenkthorngren Posts: 20,139Questions: 26Answers: 4,734

    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

  • max39max39 Posts: 6Questions: 1Answers: 0

    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!

This discussion has been closed.