Add dropdown, datepicker using sDom

Add dropdown, datepicker using sDom

drakula1234drakula1234 Posts: 58Questions: 1Answers: 0
edited April 2012 in General
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.

Replies

  • allanallan Posts: 63,689Questions: 1Answers: 10,500 Site admin
    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
  • drakula1234drakula1234 Posts: 58Questions: 1Answers: 0
    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.
  • drakula1234drakula1234 Posts: 58Questions: 1Answers: 0
    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.
  • drakula1234drakula1234 Posts: 58Questions: 1Answers: 0
    edited May 2012
    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]
  • drakula1234drakula1234 Posts: 58Questions: 1Answers: 0
    edited May 2012
    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]
This discussion has been closed.