DataTables for ptclinic8

Dataset (Faster)

<?php
  if (!defined('canInclude')) {
    header('Location:/ca/report/?page=_base');
  }
  $hide_pager = true;
  $todoPresetData = ORM::for_table('todo_preset')->where_not_equal('retired', 1)->find_array();
  $todoPresetData = json_encode($todoPresetData);
?>
<div class="container-fluid m-a-xs" >
  <div class="row" >
    <h3 >Todo Presets <a class="btn btn-info white_text m-l-lg" href="/ca/report/?page=todo_preset_edit&todo_preset_id=1&clone" >Make Todo Preset</a ></h3 >
    <table id="example" class="table table-striped table-hover table-condensed table-bordered" ></table >
  </div >
</div >

<script >
    const dataSet = <?= $todoPresetData ?>;
    const admins = <?= json_encode(ADMINS_PAST_PRESENT) ?>;
    $(document).ready(function () {
        const table = $('#example').DataTable({
            data: dataSet,
            columns: [
                {title: "ID", data: 'id'},
                {title: "--", data: 'id', orderable: false, className: 'nowrap', render: function (data) {
                        return "<a href='/ca/report/?page=todo_preset_edit&todo_preset_id=" + data + "' class='btn btn-success btn-xs'>Edit</a><a href='/ca/report/?page=todo_preset_edit&todo_preset_id=" + data + "&clone'  class='btn btn-info btn-xs'>Clone</a>";
                    }},
                {title: "Label", data: 'label'},
                {title: "Comments", data: 'comments'},
                {title: "Next", data: 'next_todo', className: 'text-center'},
                {title: "Assigned", data: 'assigned_to', className: 'text-center', render: function (data) {
                        if (data in admins) {return admins[data].initials;}
                        return '?';
                    }},
                {title: "Category", data: 'catagory', className: 'text-center'},
                {title: "Offset", data: 'return_offset', className: 'text-center'},
                {title: "Display", data: 'display_item', className: 'text-center', render: function (data) {
                        if (data == 1) return 'True';
                        return 'False';
                    }
                }
            ],
            "order": [[0, 'desc']],
            "paging": true,
            "searching": true,
            searchPanes: true,
            searchPanes: {
                initCollapsed: true
            },
            "info": true
        });
        table.searchPanes.container().appendTo(table.table().container());
        table.searchPanes.resizePanes();
    });
</script >

Table and Generate

    <div class="panel panel-success" >
      <div class="panel-heading" >
        <h3 class="panel-title" >Facebook Locations</h3 >
      </div >
      <div class="panel-body" >
        <table id="table_id" class="table table-striped table-hover table-condensed table-bordered" style="width:100%" >
          <thead >
          <th >Name</th >
          <th >ID</th >
          <th >FB Page ID</th >
          <th >URL</th >
          <th class='text-center'>Make IR</th >
          </thead >
          <tbody >
          <?php
            foreach ($gridData as $gridRow) {
              echo "<tr>";
              echo "<td>{$gridRow['name']}</td>";
              echo "<td>{$gridRow['ID']}</td>";
              echo "<td>{$gridRow['page_id']}</td>";
              echo "<td>{$gridRow['URL']}</td>";
              echo "<td class='text-center'>{$gridRow['make']}</td>";
              echo "</tr>";
            }
          ?>
          </tbody >
        </table >
      </div >
    </div >
    <script >
        $(document).ready(function () {
            $('#table_id').DataTable({
                "order": [], 
                "paging": false,
                "searching": false,
                "info": false
            });
        });
    </script >

With Filter Pane on Bottom

<script >
    $(document).ready(function() {
        var table = $('#table_id').DataTable({
            "order": [], 
            searchPanes: true,
            searchPanes: {
                initCollapsed: true
            }
        });
        table.searchPanes.container().appendTo(table.table().container());
        table.searchPanes.resizePanes();
    });
</script >