Table not sorting through PHP but sorting inside HTML

Question

I have html table create by a php, I want to sort this table, but no success. If I create the table inside the html the sort work.

<!DOCTYPE html>
<html>
<head>
<title>Teste</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/dataTables.bootstrap4.min.css">
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/dataTables.bootstrap4.min.js"></script>
</head>
<body>
 <div class="container mb-3 mt-3" id="inicio">
 </div>


<script>
$(document).ready(function(){
load_list();
$('.mydatatable').DataTable();
function load_list()
{
    var action = "data";
    $.ajax({
        url: "teste.php",
        method:"POST",
        data:{action:action},
        success:function(data)
        {
            $('#inicio').html(data);
        }
    })
}

}); 
</script>
</body>
</html>

Example of table from php:

<?php
if(isset($_POST["action"]))
{
if($_POST["action"]=="data")
{
$output = '
 <table class="table table-striped table-bordered mydatatable" style="width: 100%">
  <thead>
  <tr>
   <th>Tittle</th>
  </tr>
  </thead>
  <tbody>
  <tr>
   <td>data</td>
  </tr>
  <tr>
   <td>date2</td>
  </tr>
  </tbody>
 </table>
 ';
 echo $output;
 }
 ?>

I think the $('.mydatatable').DataTable(); is in the wrong place, I tried my options but only work if the table is inside the html page. Anyone can help me?

u_mulder · Accepted Answer · 2019-09-06 13:45:34Z

1

As first A in ajax means asynchronous, then your call to $('.mydatatable').DataTable(); happens before real data is loaded via ajax. You should move call to DataTable to success callback:

success:function(data)
{
    // note the order - first you load `html`
    $('#inicio').html(data);
    // after that you have a `.mydatatable` selector available
    $('.mydatatable').DataTable();
}

answered Sep 6, 2019 at 13:45

u_mulder

54.8k5 gold badges54 silver badges72 bronze badges

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

1 Comment

Rogers Fernandes Barbosa Over a year ago

Worked, Thank you. I tried alot of position of $('.mydatatable').DataTable() but not in inside success.

kaidoj · Accepted Answer · 2019-09-09 09:56:53Z

0

Table html is not there when you initialize your Datatable.

$(document).ready(function(){
load_list();

function load_list()
{
    var action = "data";
    $.ajax({
        url: "teste.php",
        method:"POST",
        data:{action:action},
        success:function(data)
        {
            $('#inicio').html(data);
            //move this to here
            $('.mydatatable').DataTable();
        }
    })
}

edited Sep 9, 2019 at 9:56

answered Sep 6, 2019 at 13:44

kaidoj

3631 gold badge4 silver badges6 bronze badges

Collectives™ on Stack Overflow

Table not sorting through PHP but sorting inside HTML

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related