README

CodeIgniter 4框架的服务器端Datatables库

描述

此库使CodeIgniter 4上的服务器端Datatables变得更容易

如果您想看如何实现此包的视频，请访问我的视频 https://youtu.be/Lc_xMWmprBQ

要求

• Codeigniter 4.*
• JQuery 3.*
• JQuery Datatables

安装

最佳安装方式是通过Composer，您可以使用以下命令

composer require kusmantopratama/Ci4datatables

这将添加Ci4datatables的最新版本作为模块到您的项目中。

手动安装

如果您选择不使用Composer安装，您可以下载此仓库，解压并将文件夹重命名为Ci4datatables。然后通过编辑app/Config/Autoload.php并添加Kusmantopratama\Ci4datatables命名空间到$psr4数组来启用它。例如，如果您将其复制到app/Libraries

    $psr4 = [
        'Config'      => APPPATH . 'Config',
        APP_NAMESPACE => APPPATH,
        'App'         => APPPATH,
        'Kusmantopratama\Ci4datatables'   => APPPATH .'Libraries/Ci4datatables/src',
    ];

示例

这是使用此库的示例代码

• PHP

<?php namespace App\Controllers;

use Kusmantopratama\Ci4datatables\DataTables;

class Home extends BaseController
{
	 public function dt()
    {
        $dt = new Datatables('siswa'); //siswa is a table name
        return $dt->addColumn('action', function ($db) {
            $id = $db['id'];
            $btn = "<button class='btn btn-sm btn-warning' onclick='edit(\"$id\")' title='edit'><i class='fa fa-edit'></i></button> <button class='btn btn-sm btn-danger' onclick='del(\"$id\")' title='delete'><i class='fa fa-eraser'></i></button>";
            return $btn;
        })->draw();
    }
}

• 使用POST方法进行JavaScript

var dTable;
$(function() {
        dTable = $('#tabel').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                type: 'post',
                url: '<?= site_url('admin/siswa/dt') ?>',
                data: function(d) {
                    d.<?= csrf_token() ?> = token;
                }
            },
            columns: [{
                    data: 'id',
                    name: 'id',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'dtindex',
                    name: 'dtindex',
                    orderable: false,
                    searchable: false
                }, {
                    data: 'nis',
                    name: 'nis',
                    orderable: true
                }, {
                    data: 'nama',
                    name: 'nama',
                    orderable: true
                }, {
                    data: 'action',
                    name: 'action',
                    orderable: false,
                    searchable: false,
                    class: 'text-center nowrap'
                }
            ],
            order: [
                ['0', 'desc']
            ],

            rowCallback: function(row, data) {
                var checkbox = "<div class=\"custom-control custom-checkbox\"><input class=\"custom-control-input cb-child\" name=\"multiple\" type=\"checkbox\" id=\"checkid" + data.id + "\" value=\"" + data.id + "\"><label class=\"custom-control-label\" for=\"checkid" + data.id + "\">&nbsp;</label></div>";
                $('td:eq(0)', row).html(checkbox);
            }
        });

        dTable.on('xhr.dt', function(e, settings, json, xhr) {
            token = json.<?= csrf_token() ?>;
        });

    });

使用GET方法

var dTable;
$(function() {
        dTable = $('#tabel').DataTable({
            processing: true,
            serverSide: true,
            ajax: {
                type: 'get',
                url: '<?= site_url('admin/siswa/dt') ?>'

            },
            columns: [{
                    data: 'id',
                    name: 'id',
                    orderable: false,
                    searchable: false
                },
                {
                    data: 'dtindex',
                    name: 'dtindex',
                    orderable: false,
                    searchable: false
                }, {
                    data: 'nis',
                    name: 'nis',
                    orderable: true
                }, {
                    data: 'nama',
                    name: 'nama',
                    orderable: true
                }, {
                    data: 'action',
                    name: 'action',
                    orderable: false,
                    searchable: false,
                    class: 'text-center nowrap'
                }
            ],
            order: [
                ['0', 'desc']
            ],

            rowCallback: function(row, data) {
                var checkbox = "<div class=\"custom-control custom-checkbox\"><input class=\"custom-control-input cb-child\" name=\"multiple\" type=\"checkbox\" id=\"checkid" + data.id + "\" value=\"" + data.id + "\"><label class=\"custom-control-label\" for=\"checkid" + data.id + "\">&nbsp;</label></div>";
                $('td:eq(0)', row).html(checkbox);
            }
        });

    });

您可以在列中看到dtindex，这是库自动生成的行号。在您使用dtindex列的地方，必须设置其列的orderable: false searchable: false，与addColumn()方法相同。

文档

现在您可以使用实例化类并传入表作为参数来使用它

 $dt = new Datatables('siswa');

• 选择表
  或者您可以使用QueryBuilder来选择表；

$dt = new Datatables();
$dt->table('siswa');

• 查询语法参照Codeigniter查询构建器\

• Select, where, join等功能
  对于查询功能，此库使用Codeigniter 4自身的查询构建器样式。您可以访问https://codeigniter.php.ac.cn/user_guide/database/query_builder.html获取更多信息

• 添加列
  如果您想使用闭包样式

$dt->addColumn('action', function ($db) {
                    $id = $db['kategori_id'];
                    return "<button title='edit' class='btn btn-sm btn-warning' onclick='edit(\"$id\")'>
                <i class='fa fa-edit'></i></button>
                <button class='btn btn-sm btn-danger' title='delete' onclick='del(\"$id\")'>
                <i class='fa fa-eraser'></i></button>";
                });

或者ignited datatables样式

$dt = new Datatables();
->addColumn('Actions', "<button title='edit' class='btn btn-sm btn-warning' onclick='edit("$1")'>
                <i class='fa fa-edit'></i></button>
                <button class='btn btn-sm btn-danger' title='delete' onclick='del("$1")'>
                <i class='fa fa-eraser'></i></button>", 'id');

• 编辑列
  如果您想使用闭包样式

$dt->editColumn('data_date', function ($db) {
                    return date('d, M Y', strtotime($db['data_date']));
                });

或者ignited datatables样式

$dt = new Datatables();
->editColumn('data_date', date('d, M Y', strtotime('$1')), 'data_date');

作者简介

Github: [https://github.com/kusmantopratama] Facebook: [https://web.facebook.com/k.tamapratama/]

支持我

[https://paypal.me/tama225?locale.x=en_US]

支持我

[https://sociabuzz.com/tamapratama/support]