DataTables_sort_wrapper removed when table.column().header().text(:new header") is use

jfr

Hi

I am changing the header text to add the selected year at the end

jQuery(table.column(13).header()).text("Ret" + yearSelected);

and the sort wrapper is removed
This is before

<th class="neg align_right sum_mnt sorting ui-state-default" tabindex="0" aria-controls="table" rowspan="1" colspan="1" style="width: 38px;" data-column-index="13" aria-label="Ret: activer pour trier la colonne par ordre croissant">
    <div class="DataTables_sort_wrapper">
        Ret
        <span class="DataTables_sort_icon css_right ui-icon ui-icon-carat-2-n-s">
        </span>
    </div>
</th>

and this is after

<th class="neg align_right sum_mnt sorting ui-state-default" tabindex="0" aria-controls="tableClient" rowspan="1" colspan="1" style="width: 90px;" data-column-index="13" aria-label="Ret: activer pour trier la colonne par ordre croissant">
    Ret2013
</th>

Is there another way of changing the text without removing the sort_wapper

Thanks

jfr

Hi Allan

I am trying to find a solution for the DataTables_sort_wrapper removed problem
found column().title() that is in columns.title the link return a 404

I thought it would be the the right one to change a title without removing the DataTables_sort_wrapper

If you have any hint , let me know
Thanks

allan

Hi,

Thanks for letting me know about that error - there is no column().title() method. The links are wrong and I will remove them in the next update to the site.

To do what you want to do, just modify the jQuery from your first code block slightly:

jQuery('span', table.column(13).header()).text("Ret" + yearSelected);

Allan

jfr

Hi Allan
Now it is keeping the the class but I have text at 2 places here is what is generated

<div class="DataTables_sort_wrapper">
   Ret
   <span class="DataTables_sort_icon css_right ui-icon ui-icon-carat-2-n-s">
      Ret2014
   </span>
</div>

witch give me text over text over icon

Thanks

allan

Okay - so a little more modification of the code:

var header = $( table.column(13).header() );
var span = header.find('span');
header.html( ... ).append( span );

Allan

jfr

Super

I have a lot of header to do like this, so I extended the column().title() of Alejandro Navarro with the code you have given me.

jQuery.fn.dataTable.Api.register( 'column().title()', function (newText) {
    var colHeader = jQuery(this.header());
        if (!newText) {
            return jQuery(colHeader).text().trim();
        }
    var colSpan = colHeader.find("span");
        if (!colSpan) {
            colHeader.html(newText);
        } else {
            colHeader.html(newText).append(colSpan);
        }
        return;
} );

So now I can retrieve and set any column title hopefully without any bug

var text7 = table.column(7).title();
table.column(7).title("new header");

Thanks a lot for your help

allan

very nice - thanks for sharing that with us!

Allan