Geek asks and answers

-moz-transform disables the sort selection box in the datatable header

I have a jQuery datatable generated on my web page. Since it was too large, I used zoom:0.8;to fix its size in Google Chrome.

This did not do this for Firefox, so I added -moz-transform: scale(0.8);CSS to the sheet. Everything still works fine in Chrome, but if Firefox now displays the data correctly, it seems like I can no longer change the value sortingin the header. I can click to view a list of elements, but I cannot click them (nothing happens). I have not changed anything except adding a single line to my css file.

How can i fix this?

jsbin

jsfiddle

Note. There is a similar known bug in Bugzilla , although it was published in 2008 and has not yet been fixed. It would be interesting to find a way to solve this problem.

+5
source share
1 answer

I removed lfrom my property sDomwhen declaring the first instance of my datatable.

Then I added this immediately before the tag <table>in my code:

<div class="selectLength">
    <span>Show</span>
    <select id="Length">
        <option value='5'>5</option>
        <option value='10'>10</option>
        <option value='25'>25</option>
        <option value='50'>50</option>
    </select>
    <span>elements in the datatable.</span>
</div>

Here is the javascript ( jQuery ) related to this :

$('#Length').change(function() {
    var displayLength = $('#Length option:selected').val();
    var oSettings = $('.adminTable').dataTable().fnSettings();
    oSettings.iDisplayLength = displayLength;
    $('.adminTable').dataTable().fnDraw();
});
+2
source

More articles:


All Articles