filter and fnDraw()

orange

I'm using an "x" icon to set the value of the search box to "" but I can't get the table to redraw. Nothing happens.

Here is what I have (and I can get the console.log return with no errors).

The important bit is at the very bottom.

[code]

$.getJSON('json/data', null, function(json){

var oTable = $('#quote_pipeline').dataTable({
"aaData": json.aaData,
// "bSort": false,
"sDom": '<"H"Tfr><"toolbar">t<"F"lip>',
"aoColumns": json.aoColumns,
// "bProcessing": true,
// "bScrollCollapse": true,
"iDisplayLength": 50,
"aLengthMenu": [[25, 50, 100, -1], [25, 50, 100, "All"]],
"aoColumnDefs": [{
"aTargets": [0] //Manager
,
"sWidth": '6%'
}, {
"aTargets": [1] //Customer
,
"sWidth": '8%'
}, {
"aTargets": [2] //Company
,
"sWidth": '10%'
}, {
"aTargets": [3] //Quote #
,
"sWidth": '1%'
}, {
"aTargets": [4] //Brief Description
,
"sWidth": '20%',
"bSortable": false
}, {
"aTargets": [5],
"bVisible": false
}, {
"aTargets": [6] //End Date
,
"sWidth": '6%'
}, {
"aTargets": [7] //Status
,
"sWidth": '6%'
}, {
"aTargets": [8] //Start Date
,
"sWidth": '6%'
}, {
"aTargets": [9],
"bVisible": false
}, {
"aTargets": [10],
"bVisible": false
}, {
"aTargets": [11],
"bVisible": false
}, {
"aTargets": [12],
"bVisible": false
}, {
"aTargets": [13],
"bVisible": false
}, {
"aTargets": [14] //Selling Price
,
"bVisible": false,
"sWidth": '6%'
}],
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"bFilter": true,
"oTableTools": {
"aButtons": ["copy", "csv", "xls", "pdf", {
"sExtends": "collection",
"sButtonText": "Save",
"aButtons": ["csv", "xls", "pdf"]
}]
},
"fnDrawCallback": function(){
var j = $('thead th:contains(Customer)').next().index();
$('tbody tr td:nth-child(' + j + ')').each(function(){
$(this).wrapInner(function(){
return '';
});
});
//keep the 'selected' row css style
$($('table#quote_pipeline tr').find('td.sorting_1')).removeClass('sorting_1');


},
"bInfo": true
});

$('#quote_pipeline_filter .ui-icon-close').click(function(click){
oTable.fnDraw();
console.log("draw");
$('#quote_pipeline_filter input').val("");
});

[/code]

GregP

I'm mostly commenting because I need to implement something similar and haven't gotten around to it. So I'm kind of a leech on this topic.

However, before I try any code out, my first thoughts go something like this: on click, you are asking the table to redraw, and THEN you are populating the input field with blank text. If I'm not mistaken, all that will happen will be that the table will be filtered according to the known filter value, which will be whatever is in your initialization object OR whatever is currently in your input field.

The new value of the text box is not making it to the parameters before redraw.

Now, this doesn't HAVE to be a problem... you could redraw with the old filter, and then specify that you want to filter on the table from scratch (in your case, with ""), but populating the field itself isn't going to do it. The filtering function is called with keyup or keypress events.

I haven't tried it, so apologies in advance if it's a wild goose chase, but you could probably 'fake it' by chaining a keyup (simulating that you have typed text with a keyboard and then released the keys) into your value change:

[code]
$('#quote_pipeline_filter input').val("").keyup();
[/code]

It's a hack, but unless you bind another event to the input, it'll at least work.

The potentially better (take that with a grain of salt) method would involve modifying the plugin core so that instead of looking for keypress/keyup, it is looking for change ( .change() ) so that any event changing the value of the input field will trigger the filter.

According to the API, the .change() event bubbles, and it might not be consistent cross-browser, so using keypress/keyup might have been a design choice. Allan certainly knows his stuff.

orange

Yes, that expression works. Thank you.

I was not aware of this:
"The filtering function is called with keyup or keypress events."

I'm quite sure I read that very statement in the docs but they went right by me as I wasn't quite sure what I was looking for.

allan

Design choice :-). At that time the value that has been typed in is available for use - it also fires on every key press (what we thing of as a value change), while the 'change' event might only fire when the element loses focus.

For interest, you might like to take at another one of my tools called Visual Event: http://sprymedia.co.uk/article/Visual+Event - it lets you see what events are bound to what elements in a page. Useful for debugging Javascript (particularly someone else's!).

Oh one other thing I just realised - if you are using v1.7 of DataTables and call fnFilter(""); that should clear out the text in the filter input for you.

Regards,
Allan

orange

Very cool plugin.

I've implemented the fnFilter("") method and it works as expected.

Thank you.

GregP

Heh, I couldn't help suspect my simulated keyup was a hack, although interestingly enough one of my use cases is to have the text in the field reflect the filtering enforced by some "filter preset" buttons.

But I think fnFilter is still the way to go. I can fnFilter for the actual filter on button press, and .val the input for the visual feedback aspect.