datatables PHP Jquery & datatables help rquired

[Digger]

I have a DataTables table and I have managed to get everything working fine. Within each row i have an action button with either accepts, approves or deletes the row. Like i say everything is working but after the respective button has been clicked I have to load the entire page again to get the table to refresh and it just doesnt look right. Anyway her is the code

 

initial code to load the results into the table

$(document).ready(function(){
	$("#requests-container").html("<div class=\'col-sm-12 py-5\'><center><i class=\'fas fa-spinner fa-3x fa-spin mb-3 text-muted\'></i><br /></center></div>");
	$("#requests-container").load("'.DIR.'admin/dashboard/requests", function(){
		$("#project-requests").DataTable({
			"order": [[0, "desc"]],
			"responsive": true, "lengthChange": true, "autoWidth": false, "pageLength": 25,
			"aLengthMenu": [ [10, 25, 50, -1], [10, 25, 50, "All"] ],
			"buttons": ["copy","pdf", "print", "colvis"]
		}).buttons().container().appendTo(\'#project-requests_wrapper .col-md-6:eq(0)\');
		$("#project-requests_wrapper").children(":first").addClass("p-2");
		$("#project-requests_wrapper").children(":first").next().next().addClass("p-2");
	});
});

Then I have this once the link has been clicked

 

$(document).on("click", ".action-requests", function(e){ 	
																														 
	e.preventDefault();

  var Toast = Swal.mixin({
  toast: true,
  position: \'top-end\',
  showConfirmButton: false,
  timer: 5000
  });

  var pageLink = $(this).attr("href");
  var requestId = $(this).attr("data-id");
  $.post("admin/dashboard/queries/" + pageLink,
  {
      id: requestId
  },
	function(data, status){
		if(status === "success") {
			if(pageLink == "approverequest") {
			Toast.fire({icon: "success",title: data});
			$("#requests-container").html("<div class=\'col-sm-12 py-5\'><center><i class=\'fas fa-spinner fa-3x fa-spin mb-3 text-muted\'></i><br /></center></div>");
			$("#requests-container").load("'.DIR.'admin/dashboard/requests", function(){
				$("#project-requests").DataTable({
					"order": [[0, "desc"]],
					"responsive": true, "lengthChange": true, "autoWidth": false, "pageLength": 25,
					"aLengthMenu": [ [10, 25, 50, -1], [10, 25, 50, "All"] ],
					"buttons": ["copy","pdf", "print", "colvis"]
				}).buttons().container().appendTo(\'#project-requests_wrapper .col-md-6:eq(0)\');
				$("#project-requests_wrapper").children(":first").addClass("p-2");
				$("#project-requests_wrapper").children(":first").next().next().addClass("p-2");
			});
		} else {
			Toast.fire({icon: "success",title: data});
			$("#requests-container").html("<div class=\'col-sm-12 py-5\'><center><i class=\'fas fa-spinner fa-3x fa-spin mb-3 text-muted\'></i><br /></center></div>");
			$("#requests-container").load("'.DIR.'admin/dashboard/requests", function(){
				$("#project-requests").DataTable({
					"order": [[0, "desc"]],
					"responsive": true, "lengthChange": true, "autoWidth": false, "pageLength": 25,
					"aLengthMenu": [ [10, 25, 50, -1], [10, 25, 50, "All"] ],
					"buttons": ["copy","pdf", "print", "colvis"]
				}).buttons().container().appendTo(\'#project-requests_wrapper .col-md-6:eq(0)\');
				$("#project-requests_wrapper").children(":first").addClass("p-2");
				$("#project-requests_wrapper").children(":first").next().next().addClass("p-2");
			});
		}
	}
});
});

Like i said its a bit long winded for such a simple action but if its not like this DataTables wont load after the submission 

 

I was just wondering if anyone has a simpler idea to shorten the coding

 

Thanks

[kicken]

The code to load your data seems to all be the same, so put it into a function and just call that function when you need to load the data.  Your if(pageLink == "approverequest") { test seems pointless also since both branches do the same thing, so remove it.

function loadProjectRequests(){
    $("#requests-container").html(
        "<div class=\'col-sm-12 py-5\'><center><i class=\'fas fa-spinner fa-3x fa-spin mb-3 text-muted\'></i><br /></center></div>");
    $("#requests-container").load("'.DIR.'admin/dashboard/requests", function(){
        $("#project-requests").DataTable({
            "order": [[0, "desc"]],
            "responsive": true, "lengthChange": true, "autoWidth": false, "pageLength": 25,
            "aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
            "buttons": ["copy", "pdf", "print", "colvis"]
        }).buttons().container().appendTo('#project-requests_wrapper .col-md-6:eq(0)');
        $("#project-requests_wrapper").children(":first").addClass("p-2");
        $("#project-requests_wrapper").children(":first").next().next().addClass("p-2");
    });
}

$(document).ready(function(){
    loadProjectRequests();
});

$(document).on("click", ".action-requests", function(e){

    e.preventDefault();

    var Toast = Swal.mixin({
        toast: true,
        position: 'top-end',
        showConfirmButton: false,
        timer: 5000
    });

    var pageLink = $(this).attr("href");
    var requestId = $(this).attr("data-id");
    $.post("admin/dashboard/queries/" + pageLink,
        {
            id: requestId
        },
        function(data, status){
            if (status === "success"){
                Toast.fire({icon: "success", title: data});
                loadProjectRequests();
            }
        }
    );
});

 

[Digger]

Thank you so much, i think it was a case of me going code blind, i cant believe i didn't think about that.

I've modified your suggestion a bit, i've put it in a javascript file and included it

						
var Toast = Swal.mixin({
	toast: true,
	position: 'top-end',
	showConfirmButton: false,
	timer: 5000
});
		
function loadDataTable(div,urlLink){
	$(div).html("<div id='loader'><center><i class='fas fa-spinner fa-3x fa-spin -auto m-5'></i></center></div>");
	$("#requests-container").load(urlLink, function(){ 
			$("#project-requests").DataTable({
					"order": [[0, "desc"]],
					"responsive": true, "lengthChange": true, "autoWidth": false, "pageLength": 25,
					"aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
					"buttons": ["copy", "pdf", "print", "colvis"]
			}).buttons().container().appendTo("#project-requests_wrapper .col-md-6:eq(0)");
	});
}	

So now the call is

loadDataTable("#requests-container","'.DIR.'admin/dashboard/requests");

Basically this so so i can trigger it from anywhere and for anything on the site

 

Thanks again for your help