如何修复 php codeigniter 中的 DataTables 分页和搜索框？

Posted 2023-05-07

【中文标题】如何修复 php codeigniter 中的 DataTables 分页和搜索框？

【英文标题】：How to fix DataTables paging and search box in php codeigniter?

【发布时间】：2021-01-10 07:09:08

【问题描述】：

我一直在调试这个错误，但我仍然看不到错误在哪里。如果它在视图、模型或脚本中，我无法确定确切的错误。需要帮助来修复此错误。下面是我的源代码。我的问题是搜索框不起作用，分页也不起作用

这是我的 html 视图代码

我的 html 视图的问题是，它不过滤或限制行。它显示所有行。例如我有 100 行，即使我限制为 10 行也会显示 100 行。

<div class="card-body">
    <div class="table-responsive">
         <table id="datatable" class="table table-bordered table-striped text-gray-900">
            <thead>
                <tr>
                     <th class="text-center">Name</th>
                    <th class="text-center">Date of Application</th>
                    <th class="text-center">Purpose</th>
                    <th class="text-center">Action</th>
                    <th class="text-center">Status</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</div>

这是我的 JS 脚本

我不知道这些代码的错误到底在哪里。该错误甚至没有显示在控制台日志中

$(function() 
'use strict';

  var datatable = $('#datatable');

  $('#datatable').DataTable(
      dom: 'lfrtipr',
      ajax: base_url + 'Home/get_application_request',
      type: 'post',
      processing: true,
      order:[],
      serverSide: true,
      paging: true,
      columns: [

      data: 'name',
      data: 'date_of_application',
      data: 'purpose',
      render: function(data, type, row)
                  var action = '<a href="'+base_url+'Application_request/Request_'+row.EMP_NO+'" class="sd_link">Action</a>';
                  return action;
               
      ,
      data: 'status',
       ]
      columnDefs: [
        defaultContent: '-',
        targets: '_all',
        data: null,
        orderable: false,
      ]
  );

);

这是我的模型代码

我一遍又一遍地阅读这段代码并修改它只是为了看看错误在哪里。但是还是不能调试。 php defined('BASEPATH') OR exit('不允许直接脚本访问');

class Home_model extends CI_Model 

    public function get_application_request()
        $search  = $this->input->post('search', true);
        $start   = $this->input->post('start', true);
        $offset  = $this->input->post('length', true);

        $this->db->select('*')
                 ->where('active', '1')
                 ->from('application_request');

    if($search['value'] != '')
            $this->db->group_start()
                     ->like('EMP_NO', $search['value'])
                     ->or_like('record_type', $search['value'])
                     ->or_like('date_of_application', $search['value'])
                     ->or_like('name', $search['value'])
                     ->or_like('status', $search['value'])
                     ->or_like('office_division', $search['value'])
                     ->or_like('position', $search['value'])
                     ->or_like('purpose', $search['value'])
                     ->group_end();
        ;

        $query = $this->db->order_by('date_of_application', 'DESC')
                          ->limit($start, $offset)
                          ->get();

        $total_records = $this->count_rows($search);
        
        $results = array(
            'draw' => $this->input->post('draw', true),
            'recordsTotal'    => $total_records,
            'recordsFiltered' => $total_records,
            'data'            => $query->result_array()
        );

        return $results;                      
    

    public function count_rows($search)
        $this->db->select('*')
                 ->where('active', '1')
                 ->from('application_request');

    
        if($search['value'] != '')
            $this->db->group_start()
                      ->like('EMP_NO', $search['value'])
                     ->or_like('record_type', $search['value'])
                     ->or_like('date_of_application', $search['value'])
                     ->or_like('name', $search['value'])
                     ->or_like('status', $search['value'])
                     ->or_like('office_division', $search['value'])
                     ->or_like('position', $search['value'])
                     ->or_like('purpose', $search['value'])
                     ->group_end();
        ;

        $query = $this->db->get();

        return $query->num_rows();
    

这是我的 main.php 代码

在这里，我将我的资产、页眉、页脚、侧边栏、导航栏和中间（即主体）组合在一起，然后在我的控制器上调用它。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no' name='viewport' />
    <title><?php echo $title; ?></title>
    <?php
        if($assets) echo $assets ;
    ?>
    <script type="text/javascript">
        var base_url    = '<?php echo base_url(); ?>';
        var module      = '<?php echo $this->uri->segment(1); ?>';

        $.fn.serializeObject = function()
            var o = ;
            var a = this.serializeArray();
            $.each(a, function() 
                if (o[this.name] !== undefined) 
                    if (!o[this.name].push) 
                        o[this.name] = [o[this.name]];
                    
                    o[this.name].push(this.value || '');
                 else 
                    o[this.name] = this.value || '';
                
            );
            return o;
        ;
    </script>
</head>
<body class="profile-page sidebar-collapse">
               
               
            <?php if($header) echo $header; ?>
            <div id="layoutSidenav">
                <div id="layoutSidenav_nav">
                     <?php if($sidebar) echo $sidebar; ?>
                </div>
                <div id="layoutSidenav_content">
                    <?php if($middle) echo $middle; ?>
                    <?php if($footer) echo $footer; ?>
                </div>
            </div>

</body>
</html>

console.log(data) 的结果

这是我的控制器代码

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Home extends MY_Controller 

    public function __construct()  
        parent::__construct();
        $this->load->model('Home_model');
        if(!$this->session->userdata('$2a$09$_logged_in'))
            redirect('Login');
        
    

    public function index()
        // $this->data['ref_pdp_chapter_supported'] = $this->Home_model->get_refpdpcharter();
        $this->load->model('Home_model');
        $this->data['title'] = 'Service Records | Home';
        $this->middle        = 'Home_view';
        $this->layout();
    

    public function Home_js()
        $this->output->set_content_type('text/javascript');
        $this->load->view('Home.js');
    

    public function get_application_request()
        $result = $this->Home_model->get_application_request();
        echo json_encode($result);
    
    

    

编辑：我认为draw有问题

即使有数据，draw 函数也会给出 null。我不知道从这里下一步。

【问题讨论】：

您在哪里将结果限制为 10？我在代码中的任何地方都没有看到 10。

或者是注释掉的位？

是的，评论的那个。我忘记撤消了。我试图评论它是否会起作用。我猜这个限制不起作用。因为当我评论限制时，它不会影响数据表

您可能希望将您的 js 包装在 $(document).ready(function () ); 中。你确定你正在加载所需的 js 文件等吗？

是的。我已将 js 文件链接到我的视图。

【参考方案1】：

请尝试，您可以更改您的要求。

<script type="text/javascript">
$(document).ready(function() 
 var testsTable = $('#datatable').DataTable(
      processing: true,
      serverSide: true,
      autoFill: true,
      ajax: base_url + 'home/get_application_request',
    columns: [
             data: 'SID' ,
             data: 'data-of_application' ,
             data: 'EMP_NO' ,
             data: 'record_type' ,
             data: 'name' 
        ]
  );

);            
 </script> 

【讨论】：

也可以试试serverSide: false,

终于调试了这个错误。我将 ajax 类型更改为 get 因为数据表使用 get 自动绘制数据。终于成功了

问题出在服务器端。我将模型中的“POST”方法替换为“GET”

我将编辑代码并将其更改为正确的代码。

祝你好运！！如果一切正常发布您的答案寻求帮助..谁有同样的问题...

【参考方案2】：

所以我终于修复了我的 DataTable 的搜索框和分页上的错误

下面是Model、View、Controller和JS的最终代码

这是模型的正确代码

我刚刚切换了长度并开始 替换post方法获取

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Home_model extends CI_Model 

    public function get_application_request()
        $search  = $this->input->get('search', true);
        $start   = $this->input->get('start', true);
        $length  = $this->input->get('length', true);

        $this->db->select('*')
                 ->where('active', '1')
                 ->from('application_request');

    if($search['value'] != '')
            $this->db->group_start()
                     ->like('EMP_NO', $search['value'])
                     ->or_like('record_type', $search['value'])
                     ->or_like('date_of_application', $search['value'])
                     ->or_like('name', $search['value'])
                     ->or_like('status', $search['value'])
                     ->or_like('office_division', $search['value'])
                     ->or_like('position', $search['value'])
                     ->or_like('purpose', $search['value'])
                     ->group_end();
        ;

        $query = $this->db->order_by('date_of_application', 'DESC')
                          ->limit($length, $start)
                          ->get();

        $total_records = $this->count_rows($search);
        
        $results = array(
            'draw'            => intval($this->input->get('draw', true)),
            'recordsTotal'    => intval($total_records),
            'recordsFiltered' => intval($total_records),
            'data'            => $query->result_array()
        );

        return $results;                      
    

    public function count_rows($search)
        $this->db->select('*')
                 ->where('active', '1')
                 ->from('application_request');

    
        if($search['value'] != '')
            $this->db->group_start()
                      ->like('EMP_NO', $search['value'])
                     ->or_like('record_type', $search['value'])
                     ->or_like('date_of_application', $search['value'])
                     ->or_like('name', $search['value'])
                     ->or_like('status', $search['value'])
                     ->or_like('office_division', $search['value'])
                     ->or_like('position', $search['value'])
                     ->or_like('purpose', $search['value'])
                     ->group_end();
        ;

        $query = $this->db->get();

        return $query->num_rows();
    



    

这是查看的正确代码

这里没有任何改变或修改

<main>
                    <div class="container-fluid">
                        <h1 class="mt-4">LIST OF APPLICATIONS FOR SERVICE RECORD</h1>
                       <!--  <ol class="breadcrumb mb-4">
                            <li class="breadcrumb-item"><a href="index.html">Dashboard</a></li>
                            <li class="breadcrumb-item active">Tables</li>
                        </ol> -->
                       <!--  <div class="card mb-4">
                            <div class="card-body">
                                DataTables is a third party plugin that is used to generate the demo table below. For more information about DataTables, please visit the
                                <a target="_blank" href="https://datatables.net/">official DataTables documentation</a>
                                .
                            </div>
                        </div> -->
                        <div class="card mb-4">
                          <!--   <div class="card-header">
                                <i class="fas fa-table mr-1"></i>
                                DataTable Example
                            </div> -->
                            <!-- Here is my code for HTML view -->
                            <div class="card-body">
                                <div class="table-responsive">
                                     <table id="datatable" class="table table-bordered table-striped text-gray-900">
                                        <thead>
                                            <tr>
                                                 <th class="text-center">Name</th>
                                                <th class="text-center">Date of Application</th>
                                                <th class="text-center">Purpose</th>
                                                <th class="text-center">Action</th>
                                                <th class="text-center">Status</th>
                                            </tr>
                                        </thead>
                                        <tbody></tbody>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </main>

                <script type="text/javascript" src="<?php echo base_url(); ?>Home/Home_js"></script>

这是我正确的控制器代码

实际上这里没有任何变化。我只是发布了这个供其他人参考

<?php
defined('BASEPATH') OR exit('No direct script access allowed');

class Home extends MY_Controller 

    public function __construct()  
        parent::__construct();
        $this->load->model('Home_model');
        if(!$this->session->userdata('$2a$09$_logged_in'))
            redirect('Login');
        
    

    public function index()
        // $this->data['ref_pdp_chapter_supported'] = $this->Home_model->get_refpdpcharter();
        $this->load->model('Home_model');
        $this->data['title'] = 'Service Records | Home';
        $this->middle        = 'Home_view';
        $this->layout();
    

    public function Home_js()
        $this->output->set_content_type('text/javascript');
        $this->load->view('Home.js');
    

    public function get_application_request()
        $result = $this->Home_model->get_application_request();
        echo json_encode($result);
    
    

    

这是我正确的 JS 脚本代码

我更改了类型以获取 数据类型为 Json

$(function() 
  'use strict';

  var datatable = $('#datatable');

    function get_request()

      var json = JSON.parse(data);
      var draw = json['draw'];

      return draw;

    

  $('#datatable').DataTable(
      dom: 'lfrtipr',
      // ajax: base_url + 'Home/get_application_request',
      ajax: base_url + 'Home/get_application_request',
      dataType: "json",
      type: 'get',
      processing: true,
      order:[],
      serverSide: true,
      responsive: true,
      paging: true,
      columns: [

      data: 'name',
      data: 'date_of_application',
      data: 'purpose',
      render: function(data, type, row)
                  var action = '<a href="'+base_url+'Application_request/Application_request_profile/'+row.EMP_NO+'" class="sd_link">Action</a>';
                  return action;
               
      ,
      data: 'status',
       ],
      columnDefs: [
        defaultContent: '-',
        targets: '_all',
        data: null,
        orderable: false,
      ]
  );
);

是的！它终于起作用了。谢谢大家