Функция DataTables не работает в Codeigniter - PullRequest
1 голос
/ 29 января 2020

Я пытаюсь использовать DataTables в моем проекте CRUD, но такая функция, как разбиение на страницы, восходящий-нисходящий, просто не работает на моей странице, однако страница моего друга просто работает без какой-либо настройки. В настоящее время мы работаем над тем же проектом. Это означает, что у нас есть один и тот же ресурс и все остальное. Мы используем codeigniter для этого проекта.

Вот мой код (не работает):

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

Затем есть код моего друга, который просто работает правильно:

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

В настоящее время мы используем тот же код js:

     <!-- 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>

Ответы [ 3 ]

1 голос
/ 29 января 2020

Пожалуйста, сделайте l oop для "tr", а не для "tbody", как второй foreach l oop.

     <?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; ?>
0 голосов
/ 29 января 2020

Четко упомянуто "$ не определено", что означает, что из приведенной выше библиотеки DataTable зависит от jQuery.

Итак, просто поместите файл jquery выше этого:

   <!--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>
0 голосов
/ 29 января 2020

Убедитесь, что ваш скрипт загружен при просмотре, вы можете проверить это через консоль браузера. Измените свой сценарий datatables следующим образом:

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

Затем в вашем классе таблицы измените его на:

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

Дайте мне посмотреть, как это работает:)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...