Jquery Datatable - Extra sort wrapper

khimhung.lee

Hi all,

Whenever I click on the search button, it will add an extra sort wrapper.
An ajax call is done to retrieve the info when the search button is clicked and then set the data to the datatable.
e.g. $("#requestForm #example").html(content);

I have done a destroy to the datatable.
e.g.
$("#requestForm #example").html(content);
$('#example').dataTable({
"destroy": true
});

Is there a solution to this?

Thank you.

Regards,
Justin

allan

Can you link to a page showing the issue so I can view your configuration and debug the issue please.

Allan

khimhung.lee

Hi Allan,

Thanks for the prompt reply. Guess I try to port the codes to jsfiddle for your viewing.

The js/css files that I used are mainly from DataTables-1.10.9.zip:

jquery.dataTables_themeroller.css, jquery-datatables/jquery.dataTables.js, dataTables.jqueryui.min.js, jquery-1.11.3.min.js, jquery-ui-1.9.2.custom.min.js

Will let you know once i done with the jsfiddle.

Thanks a lot once again.

Regards,
Justin

khimhung.lee

Hi Allan,

I have ported the codes into the fsfiddle. Here is the https://jsfiddle.net/khimhunglee/h0rz24hy/9/

Have put in some dummy data, instead of retrieving the data from ajax.

I noticed that whenever I click on the search button, it will add an extra

<

div class="DataTables_sort_wrapper"> to the header column.

Thank you.

Regards,
Justin

ThomD

I agree that DT is adding that div, but I'm not sure it is extra.It is being used to apply that class, with this css applied.

table.dataTable thead th div.DataTables_sort_wrapper {
    position: relative;
    padding-right: 10px;
}
table.dataTable thead th div.DataTables_sort_wrapper span {
    position: absolute;
    top: 50%;
    margin-top: -8px;
    right: -5px;
}

Now, in the test I didn't see much difference with and without that CSS applied, but I'm not sure where that span would be applied (I think it is used for the sort indicator icons).

If that div is causing problems, you could use jquery to remove it.

        "rowCallback": function( row, data, index) {
          $('.DataTables_sort_wrapper').contents().unwrap()  
        },

Oops, rowCallback is the wrong event to tie into. .draw() is probably better to hook into. So, consider this a demo, not a recommendation.

allan

Thanks for the test case. This looks like it is specific to the jQuery UI integration. The issue can also be seen in this example if you just run $('#example').DataTable().destroy() in the console.

I'll look into this - thanks.

Allan

khimhung.lee

Hi Allan & ThomD,

Thanks for the explanation and your time. Really appreciate that.

Just wondering, for the workaround, how do i actually remove the extra div class DataTables_sort_wrapper?

$("#requestForm #listing").html(content);
$('#listing').dataTable({
"destroy": true
});

e.g. oTable.row(row).remove().draw(); or using the rowCallback method

Sorry, as I am still newbie in jquery.

Thank you.

Regards,
Justin

ThomD

The draw() event is probably the right place to put the work around if you need it.

http://datatables.net/reference/event/draw

$('#listing').dataTable();
 
$('#listing').on( 'draw.dt', function () {
    $('.DataTables_sort_wrapper').contents().unwrap() 
} );

khimhung.lee

Hi ThomD,

Thanks for the reply once again.

I tried to place the draw() event as mentioned, but this time round, it add an extra <span class="DataTables_sort_icon...>

$("#requestForm #listing").html(content);
$('#listing').dataTable({
"destroy": true
});
$('#listing').on( 'draw.dt', function () {
$('.DataTables_sort_wrapper').contents().unwrap()
} );

Any resolution to that?

Thank you.

Regards,
Justin

ThomD

Again, I'd be careful removing these elements unless the are causing problems. Allan is going to take a look and he might remove them if they are not needed.

If you really want to remove that span, you would use the same technique

$('#listing').on( 'draw.dt', function () {
    $('.DataTables_sort_wrapper').contents().unwrap();
    $('.DataTables_sort_icon').contents().unwrap();
} );

khimhung.lee

Hi ThomD,

I have tried that as well, but it still add extra <span class=".DataTables_sort_icon..>
$('#listing').on( 'draw.dt', function () {
$('.DataTables_sort_wrapper').contents().unwrap();
$('.DataTables_sort_icon').contents().unwrap();
} );

Scratching head...

Any other resolution? :)

Thanks.

Regards,
Justin

allan

ooo - just noticed that is forum thread 30000 :-).

At the moment the workaround would be to modify the DOM structure in the headers immediately after a destroy is called, but before the table is reinitialised.

Actually, an even better option is to not destroy the table at all and just reuse the original. use clear() if you want to empty old data and then rows.add() to add new ones.

Allan

ThomD

You'll have to play with your syntax and event timing. Look at the header callback function, but that may be pre-rendering. Honestly, I'd leave it in there unless it is causing a problem.

khimhung.lee

Mmm..any clues to doing that?...

Meanwhile I will research on the workaround that you guys mentioned.

Thanks

Regards,
Justin

khimhung.lee

Hi Allan & ThomD,

Guess I has worked out something, upon click on the search button, clearing the datatable thead first and then added the headers back to the datatable after loading the content. But a bit of flicking when click on the search button. Haha, guess its a workaround somehow.

$('#listing thead').empty();
//populate data from ajax

$("#requestForm #listing").html(content);
$('#listing').dataTable({
"columnDefs": [ {"title": "Status", "targets": 0 },
{"title": "Inspector", "targets": 1 }
],
"destroy": true
});

http://jsfiddle.net/h0rz24hy/11/

Thanks for you guys help once again.
Allan, let me know if the fix to this is ready :)

Regards,
Justin

allan

Allan, let me know if the fix to this is ready :)

Keep an eye on the release feed for releases. I'd like to have this fixed in DataTables 1.10.10, but can't guarantee that.

Allan

khimhung.lee

Noted with thanks :)

Justin