I have my following datatable its working well and fine. but there some things i want to addon, because when i click the button data comes but when i want to get other data for another button i have to reload the page. so i want to avoid that.
I want when i click other button the current data disappears, or clears and display other information.
Like the button_2 is clicked clear information for button_1 and display the information for button_2
Also the button is disabled onclick, i want to re-enable it when other button is clicked
$(document).ready(function () {
jQuery(':button').click(function () {
if (this.id == 'button_1') {
$("#button_1").attr("disabled", true);
$("#progress").show();
if ($(".tableres").hasClass("hidden")) {
$(".tableres").removeClass("hidden");
$.ajax({
url: "url_file.php",
type: "GET"
}).done(function (result) {
$("#progress").hide();
if(result == ''){
$("#nodata").show();
}
if(result){
table.clear().draw();
table.rows.add(result).draw();
}
});
}
}
else if (this.id == 'button_2') {
$("#button_2").attr("disabled", true);
$("#progress").show();
if ($(".tableres").hasClass("hidden")) {
$(".tableres").removeClass("hidden");
$.ajax({
url: "url_file.php",
type: "GET"
}).done(function (result) {
$("#progress").hide();
if(result == ''){
$("#nodata").show();
}
if(result){
table.clear().draw();
table.rows.add(result).draw();
}
});
}
}
});
$("#search").on('keyup', function() {
$('#tabinform').dataTable().fnFilter(this.value);
})
});
var table = $("#tabinform").DataTable({
"deferRender": true,
"responsive": true,
"pagingType": "simple",
"lengthMenu": [
[20, 25, 50, -1],
[20, 25, 50, "All"]
],
"bLengthChange": false,
sDom: "ltipr",
oLanguage: {
oPaginate: {
sNext: 'Next',
sPrevious: 'Previous',
},
},
columns: [
{ data: "id" },
{ data: "name" },
{ data: "status" }
]
});
To be clear… is the data in both cases the same structure? (do they both have the same columns)
yes they have same structure and have the same columns
when i click the button data comes but when i want to get other data for another button i have to reload the page. so i want to avoid that.
I want when i click another button the current data disappears, or clears and display other information.
Like the button_2 is clicked clear information for button_1 and display the information for button_2
Also the button is disabled onclick, i want to re-enable it when other button is clicked
Well I can see a few problems.
1: You can click each button exactly once; If you’re trying to make this a radio-like thing… use a radio input.
2: Strip the if...hasClass check down to just removing the class. It doesnt need the if, it just wont do anything if it doesnt have the class.
3: Use DataTables’ own data loading functions to do this Ajax.
Spitballing, untested.
let table = $("#tabinform").DataTable({
...
"ajax": {
url: '', //Yes this is intentionally blank.
dataSrc: (data) => {
$("#progress").hide();
(data.length) ? $("#nodata").hide() : $("#nodata").show();
return data;
}
},
...
});
let radio = jQuery('input[name="tableRadio"]');
radio.change(() => {
$("#progress").show();
$(".tableres").removeClass("hidden");
table.ajax.url(radio.val()).load();
}
i prefer using button than radio, how can it be done
Stick a data-url in them and listen for a click event instead. Seems kind of silly, but you do you.
and you only calling 1 url, yet there multi as my example where shown
And I am calling a variable (well a function return), not a fixed string, so… yes, my code remains.
it will be good if u can demo with button not radio so i can also see where i can fix this
<button data-url="url">
...
$(this).data('url')
and this will display each data when button clicked without needing to reload page to click button again for data display
To steal a quote from r937… What happened when you tried it?
when i click the button, current data doesnt clear to show up the another buttons data called via GET method
Have you hard-coded some rows into the table or something?
no, i would say my script has no problems. just want to clear current selection and bring another by button, also to re-enable the disabled button
its like
click 1 bring 1 click 2 bring 2 click 3 bring 3.
but all this radio method. its just escalating the problem
If you want to use buttons instead of a radio, use them. As I said, the only differences will be:
1: to invoke a click event listener instead of a change one,
2: change the selector to match your buttons.
3: instead of pulling the value (though i suppose you could use a value…), use a dataset attribute.
The code as phrased works correctly for me, with two tweaks (I did say it was untested)…
1: the click function must call an actual function instead of an arrow function, or else the definition of $(this) is incorrect. buttons.click(function() {
2: Datatables gets pissy if the initial load is empty. You might need to specify a default load source in the url parameter.
can you demonstrate for me
I’ve already demonstrated for you.
I’m not going to write your code for you.
You give it a try, and when you get to a point you run into an error, bring your effort at it back here, we will help you with the problem. But just saying “write it for me” isnt going to fly.