How to add a Select Menu ?
How to add a Select Menu ?
royba
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
},
]
});
});`
This discussion has been closed.
Answers
Can you not just use a
changeevent on your select menu and then callajax.reload()orajax.url().load()as required?Allan
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.....
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
changeevent listener on the select element then useajax.reload()if you want to reload the same URL orajax.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