Pick column item and sort it starting with selected item?

korsakov

Is it possible to pick any element in a column and have DataTables sort this column starting with the item that had been picked?
If not, I also could use a drop-down menu with pre-defined search terms. Does anybody have code suggestions?
Thank you for any help!

allan

Hi korsakov,

Yes this should indeed be possible with a custom sort function - however what do you plan to do with values which are 'less then' the start point. For example if you have the numbers 1, 2, 3, 4, 5, 6, 7, 8, 9, and decide to start the sorting at 5, what would the order be? 5, 6, 7, 8, 9, 1, 2 3, 4?

Allan

korsakov

Thanks Allen, that would be a possibility! Maybe more elegant would be a drop-down list over a column which automatically (or manually) incorporates a list of search items showing up in a specific column. For example in a list of houses you might want to select a specific neighborhood which maybe does not show up on the start or end of the list. Of course the drop-down list needs to be limited if the column contains too many different search items. Maybe it could be fed manually? Thank you for your consideration!

allan

Hi korsakov,

A drop down list is also a possibility, and certainly would need to be done manually. You can use the fnFilter() function to do individual column filtering based on a value selected from the drop down list: http://datatables.net/examples/example_multi_filter.html . This in combination with your sorting will hopeflly do the trick for you, although one thing to note is that fnFilter() doesn't accept a range at the moment, so you can't say "if the value is greater than 5" (unless you can think of a cunning regular expression for that).

Allan

korsakov

Would you have a hint/link for me how to implement the drop-down with jquery into the code?

$("tfoot input").each( function (i) {
asInitVals[i] = this.value;
} );

allan

It depends on how you want to do the drop down. The easiest way is simply to use an HTML "select" input, to which you can apply an on change event handler:

[code]
$('#whatever_select').change( function () {
oTable.fnFilter( $(this).val() ); // perhaps add the required column?
} );
[/code]

Or you can use a dynamically created drop down such as http://ayozone.org/2008/02/06/drop-down-menu-with-jquery/ - and assign the fnFilter function to it's callbacks.

Allan

korsakov

Hi Allen, Thank you for your kind help! I already experimented with the change function but I don't get a result with you suggestion, as well.

$('#specialty').change( function () {
oTable.fnFilter( $(this).val() );
} );

this is my select-menu in :


Radio Ad
An Internet search
Yellow Page Ad


Do you see an issue here? Had you tested your suggestion by any chance? Thanks again for your support!

allan

Hi,

It looks good to me - this is what I've got:

[code]
$(document).ready(function() {
var oTable = $('#example').dataTable();
$('#specialty').change( function () {
oTable.fnFilter( $(this).val() );
} );
} );
[/code]

And that filters well. Remember that you need to change the value in order to the filter to occur (i.e. it won't happen immediately - if you want that, just call fnFilter() right after initialising the table).

Allan

korsakov

Great Allen! That worked beautifully! I made a mistake declaring var. The only issue remaining is the fact that the Pagination only appears as text while using "sPaginationType": "full_numbers": "FirstPrevious1NextLast"
I see that you are using CSS3 but it won't even show in FF. Do you have a hint? Thanks for your great support!!

var oTable = $('#table-jquery').dataTable( {
"sPaginationType": "full_numbers",
"aoColumns": [
{ "sType": "html" },{ "sType": "html" },null,null,null
]

} );
$('#specialty').change( function () {
oTable.fnFilter( $(this).val() );
} );

allan

Hi,

Glad to hear that worked. My default alternative pagination styles should work normally an all browsers (with rounded corners on capable browsers). Are you sure it is applying the correct class information? You can use Firebug to check. Also, can you post a link so I could check what the problem might be?

You can see an example of the alternative paging style here: http://datatables.net/examples/example_alt_pagination.html - if you open this with Firefox, you should see it work fine.

Thanks
Allan

korsakov

Thanks, Allen! I put the table in a DIV but for some odd reason the script only applies
.dataTables_paginate {law_table.css (line 126)
text-align:right;
}
to the "First" button instead:

.example_alt_pagination div.dataTables_paginate span.paginate_button, .example_alt_pagination div.dataTables_paginate span.paginate_active

Am I am missing anything with CSS? I also have replaced "example" in the ".example" classes with my table-id. No success.. Do I have to wrap the table with a specific DIV?

allan

Hi,

If the classes aren't being applied, then you will probably need to alter the CSS selectors (my demo CSS is just that, a demo - hack away!). Do you have a class "example_alt_pagination" - that's what I've got on my demo page BODY. I would imagine not. So strip that out of the selector. And the same with the div.dataTables_paginate wrapper.

Allan