Hi John,
this is a little bit tricky actually.
To sort the images, you will obviously need to create a text item first that can be used for sorting. My suggestion for that is to add an invisible text element at the beginning of each cell with an image, like
<span class="invisible">32red</span>
for the first cell for example. Additionally, you’ll need to add
.wp-table-reloaded .invisible {
display: none !important;
}
to the “Custom CSS” textarea on the “Plugin Options” screen.
Sorting currencies is also not possible by default (as currencies are sorted differently than text or numbers). To add this feature, I suggest to install the small plugin extension http://tobias.baethge.com/download/plugins/additional/wp-table-reloaded-currency-sorting.zip as a regular WordPress plugin. Some usage instructions can be found at http://ww.wp.xz.cn/support/topic/wp-table-reloaded-sorting-currencies-not-working and http://ww.wp.xz.cn/support/topic/troubles-sorting-colums-with-currency .
And finally turning off sorting for certain columns: This is possible by adding
"aoColumnDefs": [ { "bSortable": false, "aTargets": [ 3, 5, 6, 7] } ]
to the “Custom Commands” textfield in the “DataTables JavaScript Features” section on the “Edit” screen of your table (counting in that list starts with 0, so 3, 5, 6, 7 will remove sorting from the columns that you mentioned above).
Regards,
Tobias
Thread Starter
pix582
(@pix582)
Thanks so much, but the
“aoColumnDefs”: [ { “bSortable”: false, “aTargets”: [ 3, 5, 6, 7] } ]
is not working. i have followed all your steps, and now i have no sorting, but i tryed the images and currencies before the last bit of code and its all working.
Thread Starter
pix582
(@pix582)
got it to work
{“aoColumnDefs”: [ { “sType”: “currency_sorting”, “aTargets”: [ “column-3” ] },
{ “bSortable”: false, “aTargets”: [ 3, 5, 6, 7] }],
“bJQueryUI”: true}
was missing ,
but now seem to be missing my next page button.
Thread Starter
pix582
(@pix582)
When i use the css on my site, the table header bg dont work, and the sorting arrows are gone.
@import “http://www.laybackprofit.net/wp-content/themes/simpleblue/jquery-ui-1.7.2.custom.css”;
But if i link to datatables then it all works.
@import “http://www.datatables.net/media/css/jui_themes/redmond/jquery-ui-1.7.2.custom.css”;
also cant seem to be able to set the height of row-1 (table header)
Hi,
great that you where able to get this to work! Very nice!
About the styling: From what I can see, just copying the CSS file is not enough, you will also need to place new sorting icons (with a special file name) in the correct location on your server. Unfortunately, I’m not an expert with that, so I can’t help with the integration of jQuery UI. Sorry.
Regards,
Tobias
