How to add a Select Menu ?

royba

Hi , i have a table which i want to reload by a select menu changes (with ajax), I wonder if there are any examples.
Here is my code, so far the ajax request is ok - but i want a select menu instead of the button.

` $(document).ready(function () {
var range = $(this).val();

        var table = $('#campaigns').DataTable({
            ajax: '/Marketing/get_campaigns/false/' + range,
            deferRender: true,
            "columns": [
                {"data": "Advertiser"},
                {"data": "Campaign"},
                {"data": "Banner"},
                {"data": "Impressions"},
                {"data": "Clicks"},
                {"data": "CTR"}
            ],
            "columnDefs": [
                {
                    "render": function (data, type, row) {
                        if (data.indexOf("(Deleted)")) {
                            data = data.replace("(Deleted)", "<span class='label label-danger'>Deleted</span>");
                        }
                        return data;
                    },
                    "targets": 0
                },
                {
                    "render": function (data, type, row) {
                        if (data.indexOf("(Deleted)")) {
                            data = data.replace("(Deleted)", "<span class='label label-danger'>Deleted</span>");
                        }
                        return data;
                    },
                    "targets": 1
                },
                {
                    "render": function (data, type, row) {
                        if (data.indexOf("(Deleted)")) {
                            data = data.replace("(Deleted)", "<span class='label label-danger'>Deleted</span>");
                        }
                        return data;
                    },
                    "targets": 2
                },
            ],
            rowId: 'extn',
            select: true,
            dom: 'Bfrtip',
            buttons: [

                {

                    text: 'Load Table',
                    action: function () {
                        table.ajax.reload();
                    }
                }
            ]


        });
    });
script.
    $(function () {


        var table = $('#campaigns').dataTable({
            "ajax": {
                "url": "/Marketing/banner_stats/" + #{campaign_id},
                "dataSrc": "result"
            },
            "columns": [
                {"data": "Advertiser"},
                {"data": "Campaign"},
                {"data": "Banner"},
                {"data": "Impressions"},
                {"data": "Clicks"},
                {"data": "CTR"}
            ],
            "columnDefs": [
                {
                    "render": function (data, type, row) {
                        if (data.indexOf("(Deleted)")) {
                            data = data.replace("(Deleted)", "<span class='label label-danger'>Deleted</span>");
                        }
                        return data;
                    },
                    "targets": 0
                },
                {
                    "render": function (data, type, row) {
                        if (data.indexOf("(Deleted)")) {
                            data = data.replace("(Deleted)", "<span class='label label-danger'>Deleted</span>");
                        }
                        return data;
                    },
                    "targets": 1
                },
                {
                    "render": function (data, type, row) {
                        if (data.indexOf("(Deleted)")) {
                            data = data.replace("(Deleted)", "<span class='label label-danger'>Deleted</span>");
                        }
                        return data;
                    },
                    "targets": 2
                },
            ]
        });


    });`

allan

Can you not just use a change event on your select menu and then call ajax.reload() or ajax.url().load() as required?

Allan

royba

Thanks for your comment, i still can't figure out how can i reload the new data to the same table, i understood that i should destroy the table - and then reload... any examples? i kind of confused with all the stages.....

allan

There is no exact example of what you are looking for (I could put one together under the support packages for you). However, as I say, if you use a change event listener on the select element then use ajax.reload() if you want to reload the same URL or ajax.url().load() for a different URL, that should be all that is needed.

You shouldn't need to destroy the table (unless you want to change the columns or options of the table).

Allan