Added a class to the li following the text
Added a class to the li following the text
max39
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
Use
createdRoworcolumns.createdCellto add the class. See the docs for examples.Kevin
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) {
====================================
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
The cell data is not the text but the
ul. You need to use jQuery to find theli, similar to your original code, then compare thelitext. See this example:http://live.datatables.net/jijuwoci/1/edit
Kevin
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
The data source shouldn't matter. You can debug the
columns.createdCellfunction to see what values you have for thetdand 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
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?
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.createCellfunction or the browser's debug to see what the values of the function parameters are.Kevin
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 ^^
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.
The
liis not one of the parameters passed into the function. As I said look at thetdparameter. 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.
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
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!