CODEWITHSUNDEEP
javascriptphpjquerycodeigniterdatatables
Haikal Mulya Putra
Haikal Mulya Putra

Reputation: 43

DataTables function Does not work in Codeigniter

Im trying to use DataTables on my CRUD Project,but the function like pagination,ascending-descending just doesnt work on my page,however my friend page just work properly without any configuration. We are currently on the same project. So that means we have same resource and anything.We are using codeigniter for this project.

Here is my code (doesn't work): 

<table class="table table-bordered dataTable" id="dataTable" width="100%" cellspacing="0" role="grid" aria-describedby="dataTable_info" style="width: 100%;">
        <thead>
          <form action="<?= base_url('projects/hapus_aksi/'); ?>" method="POST" id="form-delete">
            <button id="reset" type="reset" value="Clear" class="btn btn-primary float-right mb-2 mr-2 mt-2 btn-sm">Clear</button>
            <button type="button" class="btn btn-primary float-right mb-2 mr-2 mt-2 btn-sm" data-toggle="modal" data-target="#modalSearch">
              Search
            </button>
            <button tombol-hapus id="btn-delete" type="submit" value="Delete" class="btn btn-primary float-right mb-2 mt-2 btn-sm mr-2" disabled>Delete</button>
            <a style="color: white" id="btn-edit" class=" btn btn-primary float-right mb-2 mt-2 mr-2 btn-sm disabled-href">Edit</a>
            <button type="button" class="btn btn-primary float-right mb-2 mr-2 mt-2 btn-sm" data-toggle="modal" data-target="#exampleModal">
              Create
            </button>
                <tr role="row">
                  <th><input type="checkbox" class="check-all"/></th>
                  <th>No</th>
                  <th>Company Code</th>
                  <th>Project Code</th>
                  <th>Project Name</th>
                  <th>Project Description</th>
                  <th>Start Plan</th>
                  <th>Finish Plan</th>
                  <th>Start Actual</th>
                  <th>Finish Actual</th>
                  <th>Project Status</th>
                  <th>Created Date</th>
                  <th>Created By</th>
                  <th>Changed Date</th>
                  <th>Changed By</th>
                </tr>
              </thead>
              <?php 
              if ($count == 0) {
                echo "No Data";
              }else{
              $no = 1;
              foreach ($project as $d) : ?>
                <tbody>
                  <tr role="row" class="odd"> 
                    <td><input type="checkbox" class="check-item" name="project_cd[]" value="<?= $d->project_cd; ?>"></td>
                    <td><?= $no++ ?></td>
                    <td><?= $d->company_cd ?></td>
                    <td><?= $d->project_cd ?></td>
                    <td><?= $d->project_nm ?></td>
                    <td><?= $d->project_desc ?></td>
                    <td><?= $d->start_plan_dt ?></td>
                    <td><?= $d->finish_plan_dt ?></td>
                    <td><?= $d->start_actual_dt ?></td>
                    <td><?= $d->finish_actul_dt ?></td>
                    <td><?= $d->project_sts ?></td>
                    <td><?= $d->created_dt ?></td>
                    <td><?= $d->created_by ?></td>
                    <td><?= $d->changed_dt ?></td>
                    <td><?= $d->changed_by ?></td>
                  </tr>
                </tbody>
              <?php endforeach; 
               } ?>
            </table>
              </form>
            </form>
          </div>
        </div>
      </div>

Then, there is my friend code that just work properly : 

<table class="table table-bordered dataTable" id="dataTable" width="100%" cellspacing="0" role="grid" aria-describedby="dataTable_info" style="width: 100%;">
        <thead>
          <form action="<?= base_url('Resource/remove'); ?>" method="POST" id="form-delete">
            <button id="reset" type="reset" value="Clear" class="btn btn-primary float-right mb-2 mr-2 mt-2 btn-sm">Clear</button>
            <button type="button" class="btn btn-primary float-right mb-2 mr-2 mt-2 btn-sm" data-toggle="modal" data-target="#search">
              Search
            </button>
            <button tombol-hapus id="delete" type="submit" value="Delete" class="btn btn-primary float-right mb-2 mt-2 btn-sm mr-2" disabled>Delete</button>
            <a style="color: white" id="edit" class=" btn btn-primary float-right mb-2 mt-2 mr-2 btn-sm disabled-href">Edit</a>
            <button type="button" class="btn btn-primary float-right mb-2 mr-2 mt-2 btn-sm" data-toggle="modal" data-target="#exampleModal">
              Create
            </button>
            <tr>
              <th><input type="checkbox" id="check-all"></th>
              <th>No</th>
              <th>Resource Code</th>
              <th>Resource Name</th>
              <th>Company Code</th>
              <th>Created Date</th>
              <th>Created By</th>
              <th>Changed Date</th>
              <th>Changed By</th>
            </tr>
        </thead>
        <tbody>
          <?php $no = 1;
          foreach ($resource as $r) : ?>
            <tr>
              <td><input data-ok="false" aria-required="true" id="checkbox" type="checkbox" class="check-item" name="resource_cd[]" value="<?= $r['resource_cd']; ?>" onkeyup="success()"></td>
              <td><?= $no++ ?></td>
              <td><?= $r['resource_cd']; ?></td>
              <td><?= $r['resource_nm']; ?></td>
              <td><?= $r['company_cd']; ?></td>
              <td><?= $r['created_dt']; ?></td>
              <td><?= $r['created_by']; ?></td>
              <td><?= $r['changed_dt']; ?></td>
              <td><?= $r['changed_by']; ?></td>
            </tr>
          <?php endforeach; ?>
        </tbody>
      </table>

We are currently using the same js code : 

     <!-- datatables -->
    <script src="<?= base_url('assets/vendor/datatables/jquery.dataTables.min.js')?>"></script>
    <script src="<?= base_url('assets/vendor/datatables/dataTables.bootstrap4.min.js')?>"></script>
    <script>
        $(document).ready(function(){
          $('#dataTable').DataTable({
            "searching": false
          });
        });

      </script>

Upvotes: 1

Views: 306

Answers (3)

Marmik Patel
Marmik Patel

Reputation: 192

Please do loop for "tr" not for "tbody" like second foreach loop.

     <?php 
              if ($count == 0) {
                echo "No Data";
              }else{
              $no = 1;
              foreach ($project as $d) : ?>
                <tbody>
                  <tr role="row" class="odd"> 
                    <td><input type="checkbox" class="check-item" name="project_cd[]" value="<?= $d->project_cd; ?>"></td>
                    <td><?= $no++ ?></td>
                    <td><?= $d->company_cd ?></td>
                    <td><?= $d->project_cd ?></td>
                    <td><?= $d->project_nm ?></td>
                    <td><?= $d->project_desc ?></td>
                    <td><?= $d->start_plan_dt ?></td>
                    <td><?= $d->finish_plan_dt ?></td>
                    <td><?= $d->start_actual_dt ?></td>
                    <td><?= $d->finish_actul_dt ?></td>
                    <td><?= $d->project_sts ?></td>
                    <td><?= $d->created_dt ?></td>
                    <td><?= $d->created_by ?></td>
                    <td><?= $d->changed_dt ?></td>
                    <td><?= $d->changed_by ?></td>
                  </tr>
                </tbody>
  <?php endforeach; 
               } ?>



     <?php $no = 1;
      foreach ($resource as $r) : ?>
        <tr>
          <td><input data-ok="false" aria-required="true" id="checkbox" type="checkbox" class="check-item" name="resource_cd[]" value="<?= $r['resource_cd']; ?>" onkeyup="success()"></td>
          <td><?= $no++ ?></td>
          <td><?= $r['resource_cd']; ?></td>
          <td><?= $r['resource_nm']; ?></td>
          <td><?= $r['company_cd']; ?></td>
          <td><?= $r['created_dt']; ?></td>
          <td><?= $r['created_by']; ?></td>
          <td><?= $r['changed_dt']; ?></td>
          <td><?= $r['changed_by']; ?></td>
        </tr>
      <?php endforeach; ?>

Upvotes: 1

Bhargav Sai Gajula
Bhargav Sai Gajula

Reputation: 11

It is clearly mentioned "$ is not defined" which means from the above DataTable library is dependent on jQuery.

So, Just place you jquery file above this:

   <!--Place your jQuery file here-->
   <!-- datatables -->
   <script src="<?= base_url('assets/vendor/datatables/jquery.dataTables.min.js')? 
    >"></script>
    <script src="<?= 
    base_url('assets/vendor/datatables/dataTables.bootstrap4.min.js')?>"></script>
    <script>
    $(document).ready(function(){
      $('#dataTable').DataTable({
        "searching": false
      });
     });

    </script>

Upvotes: 0

Agung Widhiatmojo
Agung Widhiatmojo

Reputation: 184

Make sure your script was load at view, you can check out through browser console. Change your datatables script with this :

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

Then at your table class change to this :

<table class="data table table-bordered dataTable" width="100%" cellspacing="0" role="grid" aria-describedby="dataTable_info" style="width: 100%;">

Let me see how it work :)

Upvotes: 0

Related Questions