Enable jQuery datatable on php rendered table with search and sort functions

Question

I have a tab panel on my html where I am rendering a table.

<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<script type="text/javascript" charset="utf8" src="https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>

<div role="tabpanel" class="tab-pane" id="manualProcess">
<div class="container" id="annotationTable" class="display nowrap" cellspacing="0" width="100%">
</div>
</div>

I am rendering the table through a php script from mysql. Function getManual() gets triggered on clicking the tab panel.

function getManual() {
  var folder = $('#workingDir').val();
  $.post('manualAnnotation.php', {'folder': folder}, function(data) {
    $('#annotationTable').html(data).show();
  })
}

And my php that renders the table is as follows:

$result = mysqli_query($connect,$sql)or die(mysqli_error());

echo "<div class='col-md-5'><table class='dataTable' cellspacing='0' id='manTab'>";
echo "<thead><tr><th>Select</th><th>Image</th><th>Location</th><th>Brand</th><th>Run</th></tr></thead>";

while($row = mysqli_fetch_array($result)) {
    $ID = $row['ID'];
    $Image = $row['Image'];
    $Location = $row['Location'];
    $Brand = $row['Brand'];
    echo "<tbody><form><tr>
    <td><div class='radio' style='padding:0px;margin:0px'><label><input type='radio' value='$ID' id='manualTab' name='manualTab'></label></div></td>
    <td>".$Image."</td>
    <td>".$Location."</td>
    <td>".$Brand."</td>
    <td><a href='#' onclick='runManual()'>RUN</a></td>
    </tr></tbody></form>";
} 

echo "</table></div>";
mysqli_close($connect);

I am trying to enable the jQuery dataTable on the table id "manTab". On my index page, i have added this code:

 $(document).ready(function() {
      $('#manTab').DataTable({
  });
});

While this renders the table the functionalities of datatable such as search, sort or pagination is not enabled.

@plonknimbuzz I tried that, but getting an error indicating that annotationTable is a div and not a table. — popeye
– popeye, Commented Mar 22, 2018 at 2:31
yep. i dont read your php before. i think i know the problem. but i try to build fiddle first to make sure that i'm correct — plonknimbuzz
– plonknimbuzz, Commented Mar 22, 2018 at 2:37

plonknimbuzz · Accepted Answer · 2018-03-22 03:06:53Z

1

you trying to convert a table which not already finish rendering (from request) yet.

function getManual() {
  var folder = $('#workingDir').val();
  $.post('manualAnnotation.php', {'folder': folder}, function(data) {
    $('#annotationTable').html(data).show();
   $('#manTab').DataTable(); //place here
  });
}

above will working if you have few rows in your table. but if you have thousand or more. you need using callback/promise to wait until your table is finish rendered.

function getManual() {
  var folder = $('#workingDir').val();
  $.post('manualAnnotation.php', {'folder': folder}, function(data) {
    $('#annotationTable').html(data).show();
  }).done(function(){
    $('#manTab').DataTable(); //place here
  });
}

answered Mar 22, 2018 at 3:06

plonknimbuzz

2,6742 gold badges21 silver badges32 bronze badges

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

2 Comments

popeye Over a year ago

Thanks a million....I do have 100's of rows...and the .done function() is a new learning for me....thank you again.

popeye Over a year ago

while the css got enabled the sort or search not working....do I have to add the column defs inside the mantab datatable function?

MyTwoCents · Accepted Answer · 2018-03-22 02:38:58Z

0

You can position individual component based on configuration like this.

$(document).ready(function() {

    $('#example').DataTable( {

        "dom": '<"top"i>rt<"bottom"flp><"clear">'

    } );

} );

Look into official Documentation for more detail

l - length changing input control
f - filtering input
t - The table!
i - Table information summary
p - pagination control
r - processing display element

edited Mar 22, 2018 at 2:38

answered Mar 22, 2018 at 2:27

MyTwoCents

7,6723 gold badges28 silver badges56 bronze badges

1 Comment

popeye Over a year ago

This is the first time I am using datatables...could you explain a bit please? I just want to add a search and sort function to the table.

Collectives™ on Stack Overflow

Enable jQuery datatable on php rendered table with search and sort functions

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