CODEWITHSUNDEEP
pythonhtmldatatablesflask-appbuilder
nlp
nlp

Reputation: 119

Unable to customize tables with jquery-datatables to sort/filter/order at display side

I have a html file to render my table using a flask app. It works fine and I'd like to add some customization using datatables.

I'm really unsure where in the jQuery portion to add the customization. My code has it in the html file, but I don't see the customization working when I run it. Should it be a static/js/jquery.js file in my projects folder? I have datatables downloaded, but I don't see the result. 

<!DOCTYPE html>
<html>
<head>

  <script type="text/javascript">
    $(document).ready(function () {
    $('#queues').dataTable();
    });
  </script>
  <script

src="https://code.jquery.com/jquery-1.11.1.min.js"></script> // 
JQuery Reference

<script

src="https://cdn.datatables.net/1.10.4/js/jquery.dataTables.min.js">    
</script>
<script

src="https://cdn.datatables.net/plug- 
 ins/9dcbecd42ad/integration/jqueryui/dataTables.jqueryui.js">
</script>
<link rel="stylesheet"

href="https://code.jquery.com/ui/1.10.3/themes/smoothness/jquery- 
 ui.css">
 <link rel="stylesheet"

 href="https://cdn.datatables.net/plugins/9dcbecd42ad/integration/
  jqueryui/dataTables.jqueryui.css">

  <style type="text/css">
body {
  background: seashell;
  color: black;
}
div.container {
  max-width: 500px;
  margin: 100px auto;
  border: 20px solid white;
  padding: 10px;
  text-align: center;
}
h4 {
  text-transform: uppercase;
}
  </style>
  <title>{{ title }} - Queues</title>
</head>
  <body>
    <h2>Page for Queues display </h2>
    <p style="color:blue;">Queues information</p>
    <table border="1">
      <th style="text-align:left;">Job</th>
  <th style="text-align:left;">Team</th>
  <th style="text-align:left;">Problem</th>
  <th style="text-align:left;">CPU</th>
  <th style="text-align:left;">Memory</th>
  {% for row in data%}
  <tr>
    <td>{{ row[0] }}</td> <td>{{ row[1] }}</td> <td>{{ row[2] }}</td> <td>{{ row[3] }}</td> <td>{{ row[4] }}</td>
  </tr>
  {% endfor %}
</table>

I get the table with data displayed properly but not the customization. I followed instructions in this example: https://www.codeproject.com/Tips/844403/%2FTips%2F844403%2FjQuery-Datatables-For-Beginners

Upvotes: 0

Views: 205

Answers (1)

user1881482
user1881482

Reputation: 746

I have found in the past that when using data tables, that if you don't include the <tbody> and <thead> tags in your table, the table won't show up as a datable. Those are shown in the link you have sent, but not in your code.

Upvotes: 1

Related Questions