DataTables function Does not work in Codeigniter

Question

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>

check out the browser console, in web development, consider it your friend also. if there's a problem it will be there to tell you something is wrong — Kevin
– Kevin, Commented Jan 29, 2020 at 2:21
Actually, the datatables was my job. so that means im also the one that put datatables on my friends page. it just work, but when im put it in mine. it doesnt work — Haikal Mulya Putra
– Haikal Mulya Putra, Commented Jan 29, 2020 at 2:52
it can't just be "it doesn't work" of course there's something wrong or missing, try to check the browser console, there's probably some clues in there, unfortunately we can't do that for you, you have to look that up on your own computer — Kevin
– Kevin, Commented Jan 29, 2020 at 3:21
Try to put same code on your friend page and check it works or not, if it works then the issue is related to your browser otherwise is in your code. — HP371
– HP371, Commented Jan 29, 2020 at 4:59
of course i tried that before. there isn't any errors on the console — Haikal Mulya Putra
– Haikal Mulya Putra, Commented Jan 29, 2020 at 5:00

Marmik Patel · Accepted Answer · 2020-01-29 11:07:49Z

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; ?>

Agung Widhiatmojo · Accepted Answer · 2020-01-29 09:24:38Z

0

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 :)

answered Jan 29, 2020 at 9:24

Agung Widhiatmojo

1841 silver badge8 bronze badges

Comments

Bhargav Sai Gajula · Accepted Answer · 2020-01-29 09:36:31Z

0

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>

answered Jan 29, 2020 at 9:36

Bhargav Sai Gajula

111 bronze badge

Collectives™ on Stack Overflow

DataTables function Does not work in Codeigniter

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related