How to add a Select Menu ?

How to add a Select Menu ?

roybaroyba Posts: 5Questions: 3Answers: 0

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
                },
            ]
        });


    });`

Answers

  • allanallan Posts: 63,352Questions: 1Answers: 10,444 Site admin

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

    Allan

  • roybaroyba Posts: 5Questions: 3Answers: 0

    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.....

  • allanallan Posts: 63,352Questions: 1Answers: 10,444 Site admin

    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

This discussion has been closed.