Mixing
Binding datatables ajax request to different button
up vote
0
down vote
favorite
I have a datatable that is configured as
var table = $(".datatable").DataTable({
processing: true,
serverSide : true,
ajax : {
url : $("#datatable").attr("data-search"),
dataType : "JSON",
complete : function (data) {
$(".total-records").html(data.responseJSON.recordsTotal);
$("#maxPageText").html(`of ${table.page.info().pages} <i class="fa fa-chevron-right" style="font-weight:200;"></i>`);
}
},
});
table.ajax.reload();
Everything works fine, search, sort and all. But, I'm trying to make a different textbox as search which is present in modal. I am trying to send ajax request and rebuild the datatable with new data return from that particular ajax but it doesn't seem to rebuild with new data.
This is the code
$("body").on("click", ".advance-search", function () {
var type = $(this).attr("data-type");
var value = "";
var search = $(this).attr("data-search");
if (type == "tag") {
value = $("#tagSearchInput").val();
} else {
value = $(".input-advance-search").val();
}
$.ajax({
url : search,
method : "GET",
dataType : "JSON",
data : {"type" : type, "value" : value, "data" : table.data().ajax.params()},
complete : function (data) {
console.log(data.responseJSON);
table.clear().rows.add(data.responseJSON.data).draw();
return false;
}
});
return false;
});
Notice that I have added return false in two places because right after this ajax request another ajax request is sent which seems to be from this line table.clear().rows.add(data.responseJSON.data).draw(); via stacktrace.
Can anyone help?
jquery ajax datatable datatables datatables-1.10
asked 14 hours ago
Ali Rasheed
1,8682918
add a comment |
up vote
0
down vote
favorite
I have a datatable that is configured as
var table = $(".datatable").DataTable({
processing: true,
serverSide : true,
ajax : {
url : $("#datatable").attr("data-search"),
dataType : "JSON",
complete : function (data) {
$(".total-records").html(data.responseJSON.recordsTotal);
$("#maxPageText").html(`of ${table.page.info().pages} <i class="fa fa-chevron-right" style="font-weight:200;"></i>`);
}
},
});
table.ajax.reload();
Everything works fine, search, sort and all. But, I'm trying to make a different textbox as search which is present in modal. I am trying to send ajax request and rebuild the datatable with new data return from that particular ajax but it doesn't seem to rebuild with new data.
This is the code
$("body").on("click", ".advance-search", function () {
var type = $(this).attr("data-type");
var value = "";
var search = $(this).attr("data-search");
if (type == "tag") {
value = $("#tagSearchInput").val();
} else {
value = $(".input-advance-search").val();
}
$.ajax({
url : search,
method : "GET",
dataType : "JSON",
data : {"type" : type, "value" : value, "data" : table.data().ajax.params()},
complete : function (data) {
console.log(data.responseJSON);
table.clear().rows.add(data.responseJSON.data).draw();
return false;
}
});
return false;
});
Notice that I have added return false in two places because right after this ajax request another ajax request is sent which seems to be from this line table.clear().rows.add(data.responseJSON.data).draw(); via stacktrace.
Can anyone help?
jquery ajax datatable datatables datatables-1.10
asked 14 hours ago
Ali Rasheed
1,8682918
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I have a datatable that is configured as
var table = $(".datatable").DataTable({
processing: true,
serverSide : true,
ajax : {
url : $("#datatable").attr("data-search"),
dataType : "JSON",
complete : function (data) {
$(".total-records").html(data.responseJSON.recordsTotal);
$("#maxPageText").html(`of ${table.page.info().pages} <i class="fa fa-chevron-right" style="font-weight:200;"></i>`);
}
},
});
table.ajax.reload();
Everything works fine, search, sort and all. But, I'm trying to make a different textbox as search which is present in modal. I am trying to send ajax request and rebuild the datatable with new data return from that particular ajax but it doesn't seem to rebuild with new data.
This is the code
$("body").on("click", ".advance-search", function () {
var type = $(this).attr("data-type");
var value = "";
var search = $(this).attr("data-search");
if (type == "tag") {
value = $("#tagSearchInput").val();
} else {
value = $(".input-advance-search").val();
}
$.ajax({
url : search,
method : "GET",
dataType : "JSON",
data : {"type" : type, "value" : value, "data" : table.data().ajax.params()},
complete : function (data) {
console.log(data.responseJSON);
table.clear().rows.add(data.responseJSON.data).draw();
return false;
}
});
return false;
});
Notice that I have added return false in two places because right after this ajax request another ajax request is sent which seems to be from this line table.clear().rows.add(data.responseJSON.data).draw(); via stacktrace.
Can anyone help?
jquery ajax datatable datatables datatables-1.10
asked 14 hours ago
Ali Rasheed
1,8682918
I have a datatable that is configured as
var table = $(".datatable").DataTable({
processing: true,
serverSide : true,
ajax : {
url : $("#datatable").attr("data-search"),
dataType : "JSON",
complete : function (data) {
$(".total-records").html(data.responseJSON.recordsTotal);
$("#maxPageText").html(`of ${table.page.info().pages} <i class="fa fa-chevron-right" style="font-weight:200;"></i>`);
}
},
});
table.ajax.reload();
Everything works fine, search, sort and all. But, I'm trying to make a different textbox as search which is present in modal. I am trying to send ajax request and rebuild the datatable with new data return from that particular ajax but it doesn't seem to rebuild with new data.
This is the code
$("body").on("click", ".advance-search", function () {
var type = $(this).attr("data-type");
var value = "";
var search = $(this).attr("data-search");
if (type == "tag") {
value = $("#tagSearchInput").val();
} else {
value = $(".input-advance-search").val();
}
$.ajax({
url : search,
method : "GET",
dataType : "JSON",
data : {"type" : type, "value" : value, "data" : table.data().ajax.params()},
complete : function (data) {
console.log(data.responseJSON);
table.clear().rows.add(data.responseJSON.data).draw();
return false;
}
});
return false;
});
Notice that I have added return false in two places because right after this ajax request another ajax request is sent which seems to be from this line table.clear().rows.add(data.responseJSON.data).draw(); via stacktrace.
Can anyone help?
jquery ajax datatable datatables datatables-1.10
jquery ajax datatable datatables datatables-1.10
asked 14 hours ago
Ali Rasheed
1,8682918
asked 14 hours ago
Ali Rasheed
1,8682918
asked 14 hours ago
Ali Rasheed
1,8682918
asked 14 hours ago
Ali Rasheed
1,8682918
asked 14 hours ago
Ali Rasheed
1,8682918
1,8682918
add a comment |
add a comment |
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53371940%2fbinding-datatables-ajax-request-to-different-button%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
