Trouble with jquery ajax and datatables

Question

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>

I have added to my answer as you posted code.

psx
– psx

2012-04-06 13:05:34 +00:00
Commented Apr 6, 2012 at 13:05 — psx
– psx, Commented Apr 6, 2012 at 13:05

psx · Accepted Answer · 2012-04-06 13:05:04Z

1

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();
});

edited Apr 6, 2012 at 13:05

answered Apr 6, 2012 at 12:55

psx

4,0486 gold badges32 silver badges59 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Travis Emery Over a year ago

It worked! Amazing, been struggling with this for a few days. Thanks a bunch.

psx Over a year ago

No worries. You could also refactor your code a little to remove the code duplication :)

Nicola Peluchetti · Accepted Answer · 2012-04-06 12:55:01Z

0

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

answered Apr 6, 2012 at 12:55

Nicola Peluchetti

77k32 gold badges151 silver badges197 bronze badges

1 Comment

psx Over a year ago

Note, to apply dataTables to a table, it is $('#tableID').dataTable() (no 's').

Collectives™ on Stack Overflow

Trouble with jquery ajax and datatables

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related