$.fn.dataTable.ext.type.order with HTML

lenamtl

Hi,
I'm having this code to order a list of status (this is a multi language system)

$.fn.dataTable.ext.type.order['task_status_php'] = function ( d ) {
    switch ( d ) {
                       case'<?php echo ASLang::get('overdue'); ?>': return 1;
                   case '<?php echo ASLang::get('next'); ?>':  return 2;
                   case '<?php echo ASLang::get('done'); ?>':  return 3;
            }
            return 0;
};

"order": [[ 2, "desc" ]],
"columnDefs": [
               { "type": "task_status_php", "targets": 2 },
            ]

It's working ok.

Now what I'd like to do is to add a badge to the status depending of the status
but when changing
ASLang::get('done')

to this in the table code the case order is no longer working
'<span class="badge bg-green">'. ASLang::get('done') . '</span>'

I have also tried to change the switch case with the new formatting (with the badge span) with no luck.

Is there a way to make this work?
Thanks

bindrid

When your page is loaded, what does the generated javascript look like?

lenamtl

The JS part is quite long which info do you need?

allan

The sorting plug-in specifically, so we can see what it looks like when the PHP aspects are rendered.

Also it would be useful to see the data in column 2.

Allan

lenamtl

Hi Allan, I'm not sure to understand, I will try to reexplain:

The data of the column 2 refer to the status of a task so I have php request that check the value and display a status name in this format
<?php echo ASLang::get('overdue'); ?>
this is working ok
So because the system is multi-language if I want the sort overdue task first I have to use a case like this and sort by the numbers.

case'<?php echo ASLang::get('overdue'); ?>': return 1;
case '<?php echo ASLang::get('next'); ?>':  return 2;
case '<?php echo ASLang::get('done'); ?>':  return 3;

This is working ok.

Now if I want to add some HTML around the status name let say I want to have overdue red.

So I changed this <?php echo ASLang::get('overdue'); ?> to this in the column
'<span class="badge bg-red">'. ASLang::get('overdue') . '</span>'
When adding this HTML code the sort is no longer working.

I have tried to change the case by putting the html into the case code:
case'<span class="badge bg-red">'. ASLang::get('overdue') . '</span>': return 1;
but it's not working.

Hope this is more clear...

allan

Could you right click on the page and select "View source". Then save the HTML shown and attach it to this page. That would be perfect.

Thanks,
Allan

lenamtl

Without the background the TD look like this and the script will reorder correctly

<td>Overdue</td>

With the red background the TD look like this and the script will NOT reorder correctly
(instead to be the first it's the last')

<td><span class="badge bg-red">Overdue</span></td>

I cleared the cookies and localstorage to make sure.
Thanks

allan

I see - thanks. You need to update your sorting plug-in to accept the full HTML string. Probably the easiest option is to use a regex to strip the HTML and then sort as normal.

Allan

lenamtl

I cannot use normal sort as this is a multi-language system I need a custom sort.
Does stripping the HTML with regex can work with $.fn.dataTable.ext.type.order ?

Do you have an example that use regex with $.fn.dataTable.ext.type.order ?

$.fn.dataTable.ext.type.order['task_status_php'] = function ( d ) {
    switch ( d ) {
                   case'<?php echo ASLang::get('overdue'); ?>': return 1;
                   case '<?php echo ASLang::get('next'); ?>':  return 2;
                   case '<?php echo ASLang::get('done'); ?>':  return 3;
            }
            return 0;
};

allan

You have to do the HTML stripping. All DataTables does is give you the text in the cell. If that includes HTML, then the string given to you would include the HTML - and that is what your plug-in appears to be tripping up on just now.

This SO thread shows how you can do it with regex.

Allan

lenamtl

I have found a simpler solution that may be useful for other users

$.fn.dataTable.ext.type.order['task_status_php-pre'] = function(d) {

v = $(d).text();
switch ( v ) {
case '<?php echo ASLang::get('overdue'); ?>':   return 1;
case '<?php echo ASLang::get('next_task'); ?>': return 2;
case '<?php echo ASLang::get('done'); ?>':      return 3;
}
return 0;
};

"order": [[ 2, "asc" ]],
"columnDefs": [
               { "type": "task_status_php", "targets": 2 },
            ]