How do I dynamically populate data in select column filter of jquery datatable?

How do I dynamically populate data in select column filter of jquery datatable?

Manishbeit2004Manishbeit2004 Posts: 1Questions: 1Answers: 0

I am using jquery datatable where I the data is populated through JSON array, for the same I have used ajax source option.
But when select column filter applied on one of the column, it do not show unique values of the column in the select drop down.

Could You please let me know , how would I populate the same in select filter dynamically?

Below is my datatable code

        $('#polDatatable').dataTable( {
            "sPaginationType" : "full_numbers",
            "bFilter": true,
            "bAutoWidth": false,
            'iDisplayLength': 25,
            "aaSorting": [],

                "ajax": "ajax/data/objects3.txt",
                "columns": [
                    { "class": "textSize", "data": "Client","sWidth": "220px", "bSortable": true,"bFilter": true },
                    { "class": "verticalstyle","data": "Fund","sWidth": "220px", "bSortable": true,"bFilter": true },
                    { "class": "txtype","data": "Transaction Type","sWidth": "100px","bSortable": true, "bFilter": true },
                    { "class": "datestyle","data": "Trade Date","sWidth": "80px","bSortable": true, "bFilter": true },
                    { "class": "datestyle2","data": "Gross Amount","sWidth": "145px","bSortable": true, "bFilter": true },
                    {
                        "class":          'details-control',
                        "orderable":      false,
                        "data":           null,
                        "defaultContent": '',
                        "sWidth": "5px",
                        "bSortable": true,
                        "bFilter": true
                    }

                ],

            "aoColumnDefs": [
                { "bSortable": true, 
                    "aTargets": [4],
                      "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                         //alert('Inside createCall');
                         var $currencyCell = $(nTd);
                         //alert($currencyCell.text());
                         //var commaValue = '$'+$currencyCell.text();
                         var commaValue = '$'+$currencyCell.text().replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,");
                         //alert(commaValue);
                         $currencyCell.text(commaValue);
              }},

                { 
                      "sWidth": "100px", 
                      "bSortable": true,
                      "bFilter": true,
                      "aTargets": [ 2 ],  
                      "fnCreatedCell": function (nTd, sData, oData, iRow, iCol) {
                                var $currencyCell = $(nTd);
                                var cellValue = $currencyCell.text();

                                if(cellValue=='Redeem')
                                {
                                     $currencyCell.css('color','red');
                                }

                      }}],

            //"aoColumns": [{"sWidth": "40px"},{"sWidth": "400px","bSortable": true},{"sWidth": "200px","bSortable": true},{"sWidth": "200px","bSortable": true}],
            //"order": [[1, 'asc']],
            "sDom": 't<"dataTablesTop"lip><"clear">t<"dataTablesBottom"lip><"clear">"',
            //"sDom": 't<"dataTablesBottom"flip><"clear">',
            "oLanguage": {
                "oPaginate": {
                    "sFirst": "&lt;&lt;",
                    "sLast": "&gt;&gt;",
                    //"sPrevious": "&lt;",
                    //"sNext": "&gt;"
                    "sPrevious": "Previous",
                    "sNext": "Next"
                },
                "sInfo": "_START_ - _END_ of _TOTAL_",
                "sInfoEmpty": "0 - 0 of 0",
                "sLengthMenu": "<span style='color:#002146;font-size:13px;'>Show Rows</span>: _MENU_"
            }
    }).columnFilter({
        sPlaceHolder: "head:after",
        aoColumns: [ { type: "text"},
                             { type: "text" },
                             { type: "select"},
                             { type: "text" },
                             { type: "number-range" }]

    });
This discussion has been closed.