Add dropdown, datepicker using sDom

drakula1234

I am not sure if it is possible to add the dropdown and date picker beside the search filter using sDom or are there any other ideas to implement it. I am kind of confused how to implement it. Did anyone try to implement it.

allan

Perfectly possible to do, but I don't have code that will do that exactly, so you'd need to create a feature plug-in for DataTables. How to do that is explained in this blog post: http://datatables.net/blog/Creating_feature_plug-ins

Allan

drakula1234

Thanks Allan for the reply, I am very much confused now with the example. I want to include the jQuery datepicker: http://jqueryui.com/demos/datepicker/#date-range from this link into the sDom and also a dropdown with some text in it. I am not sure if I have to implement my custom function to draw the datepicker using that example. Correct me if my assumption was wrong.

drakula1234

I am pretty new to datatables, can someone give me a sample example of how to attach jquery datepicker in sDom so that I can try to implement drop down.

drakula1234

I need something like a text Date: textfield, when I click on it should openup the datepicker.

I have tried something like this.. this doesn't create the label and textbox unless I create the div tag with the id "datepicker" in the jsp page. Can someone give me a solution for this to get added beside the search filter.

[code]
var DatePicker = function(oDTSettings) {
oDTSettings.aoDrawCallback.push({
"fn" : function() {
var label = $("").attr('for', "from").text('Date:');
var input = $('').attr({id: 'from', name: 'from'});

input.appendTo(label);
$("#datepicker").append(label);
input.datepicker();

},
"sName" : "DatePickerControl"
});
};

$.fn.dataTableExt.aoFeatures.push( {
"fnInit": function(oDTSettings) {
return new DatePicker(oDTSettings);
},
"cFeature": "D",
"sFeature": "DatePickerControl"
});

[/code]

drakula1234

I have given my example to create a feature plugin, I am missing something which I am not sure of to get this working. I also need to include this as an ajax call like what the search filter does. Can someone help me with this please.

I have included the following code in the input.datepicker() function but I need this something more deeply integrated into the datatables.

[code]
onSelect: function(fromDate, inst){
$.ajax({"type": "POST",
"url": ".......?fromDate=" +fromDate
});
}
[/code]