CODEWITHSUNDEEP
javascriptjquerydatatables
Travis Emery
Travis Emery

Reputation: 89

Trouble with jquery ajax and datatables

I am trying to use jquery ajax to get data from a php file. This php file prints a table made from a db query. Once the table is returned to the html page, I wanted to apply datatables styling to the table, but this will not work.

It maybe that I should just use datatables ajax functionality, instead of jquery ajax. I just have three links that a user can click on to call ajax, where not all the links return a printed table.

I suspect it it because of javascript timing, where all the js loads before the table has been output.

I tried using jquery.on(), but could not get it to work with datatables.

I appreciate any help. Sorry if this is confusing. 

<script type="text/javascript">     
$(document).ready(function() {

// EVENT LISTENER FOR CLICKS
var option_action = "fridge";
var using = "pantry";
$.post("./backend.php", { option: option_action, action: using }, function(data) {
$("#content").html(data);
load_table();
});
// EVENT LISTENER FOR CLICKS
$(".pantry_menu li").click(function() {
    alert("CLICK");
//getting data from the html
var option_action = $( this ).attr("name");
var using = "pantry";
$.post("./backend.php", { option: option_action, action: using }, function(data) {      
    $("#content").html(data);
});
return false;
});

//Mouse action listeners for side bar
$(".pantry_menu li").mouseover(function() {
    $(this).css("border-bottom" , "2px solid black");
});
$(".pantry_menu li").mouseout(function() {
    $(this).css("border-bottom" , "2px dotted black");
});
$(".fridge_table1").change(function(){
   alert("CHANGE");
});
});

function load_table()
{
    $('.fridge_table1').dataTable( {
        "aaSorting": [[ 4, "desc" ]]
        ,"bJQueryUI": true
    });
}
</script>

Upvotes: 1

Views: 3398

Answers (2)

psx
psx

Reputation: 4048

In your ajax success function, you can reapply dataTable to the table. For example:

  $.ajax({
    type: "POST",
    url: "ajax.php",
    data: {
      request: 'something'
    },
    async: false,
    success: function(output)
    {
      $('#myTableDiv').html(output); //the table is put on screen
      $('#myTable').dataTable();
    }
  });

EDIT due to your update

You need to change the "EVENT LISTENER FOR CLICKS" to call your function that applies dataTables. Change:

$.post("./backend.php", { option: option_action, action: using }, function(data) {      
    $("#content").html(data);
});

to

$.post("./backend.php", { option: option_action, action: using }, function(data) {      
    $("#content").html(data);
    load_table();
});

Upvotes: 1

Nicola Peluchetti
Nicola Peluchetti

Reputation: 76910

You should put the .dataTables() part in the callback of your ajax function

$.ajax{
    url: yoururl,
   ... 
    success: function(data){
        //append the table to the DOm
        $('#result').html(data.table)
        //call datatables on the new table
        $('#newtable').dataTables()
    }

otherwise you are trying to transforma table that doesn't exist yet in the DOM

Upvotes: 0

Related Questions