DataTable（服务器端）Ajax 使用 CodeIgniter4 错误 DataTable 未显示

Question

所以我的任务是使用 codeigniter 4 制作一个数据表，并在互联网上浏览如何做到这一点，我设法在 youtube 上找到一个教程并遵循每个步骤，但由于某种原因，服务器端的数据表不可用不显示表格

{"draw":0,"recordsTotal":10,"recordsFiltered":10,"data":[{"id":"5","nama":"哈莉·迪金森","telp":"1" ,"alamat":"899 穆罕默德山公寓 571 北凯利，RI 54613-4975","电子邮件":"[电子邮件受保护]","position":"经理"},{"id":"2","nama":"Jack Mante"," telp":"831","alamat":"85307 安娜玛丽分机 凯利郡，俄勒冈州 19174-5549","电子邮件":"[电子邮件受保护]","职位":"经理"},{"id":"3","nama":"Jed Oberbrunner","telp ":"534","alamat":"744 迪基格罗夫斯 沃尔夫切斯特, ND 29161","电子邮件":"[电子邮件受保护]","位置":"IT"},{"id":"10","nama":"乔尔·斯塔姆","telp": "0","alamat":"4619 斯宾卡大道套房 356 布莱斯湖，DE 88639","email":"[电子邮件受保护]","position":"HRD"},{"id":"8","nama":"Lorena Veum","telp" :"812249","alamat":"88883 戴娜悬崖套房 269 埃里克赛德, KY 35382-6163","电子邮件":"[电子邮件受保护]","position":"IT"},{"id":"6","nama":"夫人。老贝蒂·克雷格","telp":"661","alamat":"贝利新月 762 号 Matildaborough, OK 22163","email":"[电子邮件受保护]","position":"实习生"},{"id":"4","nama":"Myron Okuneva","telp": "1","alamat":"29794 巴顿新月 南万斯，NE 81019","email":"[电子邮件受保护]","position":"IT"},{"id":"7","nama":"Prof.莱昂内尔·安昆丁 DDS","telp":"0","alamat":"1516 Armand Oval 套房 127 斯图尔特港, AR 95802-1447","电子邮件":"[电子邮件受保护]","position":"经理"},{"id":"1","nama":"Prof.皮特·特纳 V","telp":"1","alamat":"4236 巴什里安溪 曼兰, AR 84138","电子邮件":"[电子邮件受保护]","职位":"经理"},{"id":"9","nama":"Wilson Johns","telp": "229313","alamat":"8992 乔纳森港 霍普兰, PA 66858","电子邮件":"[电子邮件受保护]","职位":"IT"}]}

这就是它给我的结果

• 这是我的模型：

<?php

namespace App\Models;

use CodeIgniter\Model;

class ModelKaryawan extends Model
{
    protected $table = 'karyawan';
    public function searchAndDisplay($keyword = null, $start = 0, $length = 0)
    {
        $builder = $this->table('karyawan');
        if ($keyword) {
            $arr_keyword = explode(" ", $keyword);
            for ($i = 0; $i < count($arr_keyword); $i++) {
                $builder = $builder->orLike('nama', $arr_keyword[$i]);
                $builder = $builder->orLike('telp', $arr_keyword[$i]);
                $builder = $builder->orLike('alamat', $arr_keyword[$i]);
                $builder = $builder->orLike('email', $arr_keyword[$i]);
                $builder = $builder->orLike('position', $arr_keyword[$i]);
            }
        }
        if ($start != 0 or $length != 0) {
            $builder = $builder->limit((int)$length, (int)$start);
        }

        return $builder->orderBy('nama')->get()->getResult();
    }
}

• 这是我的控制器

<?php

namespace App\Controllers;

use \Hermawan\DataTables\DataTable;

use App\Models\ModelKaryawan;

class Karyawan extends BaseController
{
    protected $db, $builder, $ModelKaryawan;

    public function __construct()
    {
        $this->db      = \Config\Database::connect();
        $this->builder = $this->db->table('users');
        $this->ModelKaryawan = new ModelKaryawan();
    }

    public function karyawanAjax() //Server Side (Ajax)
    {
        $param['draw'] = isset($_REQUEST['draw']) ? $_REQUEST['draw'] : '';
        $start = isset($_REQUEST['start']) ? $_REQUEST['start'] : '';
        $length = isset($_REQUEST['length']) ? $_REQUEST['length'] : '';
        $search_value = isset($_REQUEST['search']['value']) ? $_REQUEST['search']['value'] : '';

        $data = $this->ModelKaryawan->searchAndDisplay($search_value, $start, $length);
        $total_count = $this->ModelKaryawan->searchAndDisplay($search_value);

        $json_data = array(
            'draw' => intval($param['draw']),
            'recordsTotal' => count($total_count),
            'recordsFiltered' => count($total_count),
            'data' => $data

        );
        echo json_encode($json_data);
    }
}

• 这是我的看法

<title>Data table ajax</title>
<link rel="stylesheet" href="https://cdn.datatables.net/2.0.1/css/dataTables.dataTables.css">

<table class="table" id="example">
    <thead>
        <tr>
            <th scope="col">#</th>
            <th scope="col">Nama</th>
            <th scope="col">Telp</th>
            <th scope="col">Alamat</th>
            <th scope="col">Email</th>
            <th scope="col">Position</th>
        </tr>
    </thead>
</table>
<script src="https://code.jquery.com/jquery-3.7.1.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.2/moment.min.js"></script>
<script src="https://cdn.datatables.net/2.0.1/js/dataTables.js"></script>
<script>
    $(document).ready(function() {
        $('#example').DataTable({
            'processing': true,
            'serverSide': true,
            'serverMethod': 'post',
            "ajax": "<?= site_url('Karyawan/karyawanAjax') ?>",
            "columns": [{`your text`
                "data": "nama"
            }, {
                "data": "telp"
            }, {
                "data": "alamat"
            }, {
                "data": "email"
            }, {
                "data": "position"
            }]
        });
    });
</script>

Answer 1

您的数据表列中有一个随机的

your text

字符串，并且缺少

id

列。尝试以下操作：

<script>
    $(document).ready(function() {
        $('#example').DataTable({
            'processing': true,
            'serverSide': true,
            'serverMethod': 'post',
            "ajax": "<?= site_url('Karyawan/karyawanAjax') ?>",
            "columns": [{
                "data": "id"
            },{
                "data": "nama"
            }, {
                "data": "telp"
            }, {
                "data": "alamat"
            }, {
                "data": "email"
            }, {
                "data": "position"
            }]
        });
    });
</script>