How to get a dynamic data in dropdown to filter records

pv619

Hi,

I am trying to populate a dynamic drop down list from an excel file to filter the data. I get all the data in the DataTable and the drop down filter works fine too with static data. But I don't know how to include dynamic data in the drop down list using jQuery / columnFilter plugin. I been through 3 pages of Google but couldn't find a thing. As mentioned above, I am using columnFilter plugin to filter records.

What I'm trying to do is:

{ "mData": "TrackName" },

data to be populated dynamically, rather then Statically.

{ type: "select", values: ["Mirrors", "Just Give Me A Reason", "Don't You Worry"] },

So, is it possible to have the mData Value TrackName in the select drop-down values?

Here's a full code of the jQuery for your inspection:

$(document).ready(function () {

    $.datepicker.regional[""].dateFormat = 'dd/mm/yy';
    $.datepicker.setDefaults($.datepicker.regional[''])

    var oTable = $('#myDataTable').dataTable({
        "bServerSide": true,
        "sAjaxSource": "AjaxHandler",
        "bProcessing": true,
        "sScrollY": "100",
        "bPaginate": true,
        "bRetrieve": true,
        "bDestroy": true,
        "sPaginationType": "full_numbers",
        "iDisplayLength": 150,
        "aoColumns": [
    { "mData": "TrackID" },
    {
        "mData": "Date", "bSortable": false,
        "fnRender": function (obj, val) {
            var dx = new Date(parseInt(val.substr(6)));
            var dd = dx.getDate();
            var mm = dx.getMonth() + 1;
            var yy = dx.getFullYear();

            if (dd <= 9) {
                dd = "0" + dd;
            }
            if (mm <= 9) {
                mm = "0" + mm;
            }
            return dd + "/" + mm + "/" + yy;
        }
    },
    { "mData": "TrackName" },
    { "mData": "ArtistName" },
    { "mData": "Times" }
        ]
    });

    oTable.columnFilter({
        aoColumns: [{ type: "none" },
                    { type: "date-range" },
                    { type: "select", values: ["Mirrors", "Essex", "Lothian", "Leicester", "Buckinghamshire"] },
                    { type: "text" },
                    { type: "number-range" }
        ]
    });
});

HTML Table Code:

<table id="myDataTable" class="display">
<thead>
<tr>
    <th>Track ID</th>
    <th>Date</th>
    <th>Track Name</th>
    <th>Artist Name</th>
    <th>Times</th>
 </tr>
 </thead>
 <tbody>
 </tbody>
 <tfoot>
 <tr>
     <th style="display: none"></th>
     <th>Date</th>
     <th>Track Name</th>
     <th style="display: none">Artist Name</th>
     <th style="display: none">Plays</th>
 </tr>
 </tfoot>
 </table>

Any help would be a great help. :) Thanks :)

pv619

Can you help, Allan?

I am using ColumnFilter plugin and in their, it says that by just using { type: "select" } it should display all the records in the drop-down list. Unless I am doing something wrong here? Please if you could help. thanks

pv619

Hi Allan, could you help please? :) sorry to keeping on asking but I'm really stuck on this part with the dataTables & columnFilter Plugin and Google is not helping either.

I now know that with sAjaxSource = true the select doesn't populate the data. Is there any way to populate / build data in the select with sAjaxSource = true and bServerSide = true. Please help plz :)

allan

ColumnFilter is a third part plug-in and I don't know if it has been tested with 1.10. If you require urgent help from me priority support is available.

Allan