use two or more tables from database in editor

heissen

I use codeigniter to create editor datatables, it was normal for one table, but when i use two tables, there problem in ajax, here is model.

public function getNdsar2020($post)
{
// Build our Editor instance and process the data coming from _POST
Editor::inst( $this->editorDb, 'ndsar2020' )
    ->fields(
        Field::inst( 'no_ndsar' ),
        Field::inst( 'tgl_ndsar' ),
            // ->validator( Validate::dateFormat( 'd/m/y' ) )
            // ->getFormatter( Format::dateSqlToFormat( 'd/m/y' ) )
            // ->setFormatter( Format::dateFormatToSql( 'd/m/y' ) ),
        Field::inst( 'surat' ),
        Field::inst( 'tgl_surat' ),
        Field::inst( 'keterangan' ),
        Field::inst( 'hal' )
    )
    ->process( $_POST )
    ->json();
}

public function getPelanggan2020($post)
{
// Build our Editor instance and process the data coming from _POST
Editor::inst( $this->editorDb, 'pelanggan_2020' )
    ->fields(
        Field::inst( 'nama_pelanggan' ),
        Field::inst( 'idpel' ),
        Field::inst( 'tarif_lama' ),
        Field::inst( 'daya_lama' ),
        Field::inst( 'tarif_baru' ),
        Field::inst( 'daya_baru' ),
        Field::inst( 'jumlah' ),
        Field::inst( 'alamat' ),
        Field::inst( 'daerah_kerja' ),
        Field::inst( 'kontak' )
    )
    ->process( $_POST )
    ->json();
}

}

****and then here my editorlib.****

public function process($post)
{   
    // DataTables PHP library
    require dirname(__FILE__).'/Editor-PHP-1.9.2/lib/DataTables.php';

    //Load the model which will give us our data
    $this->CI->load->model('Sar_model');

    //Pass the database object to the model
    $this->CI->Sar_model->init($db);

    //Let the model produce the data
    $this->CI->Sar_model->getNdsar2020($post);

    //Let the model produce the data
    $this->CI->Sar_model->getPelanggan2020($post);

}

i check the ajax load result with jsonlint, and here is the problem .

Would you give me solution ??

allan

It looks like you are dumping the JSON from both tables into the same response. If so, then yes, that will cause a problem because:

1. It's not valid JSON
2. DataTables expects onto the data back from the request it makes - not multiple tables worth.

Can you show me how you are initialising the two tables on the client-side please? Are you using two different URLs or just a common one? I would typically suggest using different ones so it is easy to route them as needed on the server-side and respond only with the data needed for that request.

If you want to combine them together into a single Ajax request, then you need to use ->data() rather than ->json() to get the data and then dump it out into JSON in your own output array.

Allan

heissen

I'm a newbe,
this is the controller.

public function Ndsar2020()
    {
            $this->load->view('sar/ndsar2020',$data);
     }
        
public function Pelanggan2020()
     {
            $this->load->view('sar/pelanggan2020',$data);
     }

I use different url,
then here my script for ndsar2020.

var editor; // use a global for the submit and return data rendering in the examples

$(document).ready(function () {
    $.fn.dataTable.moment('DD/MM/YYYY');
    editor = new $.fn.dataTable.Editor({
        ajax: "Ajax/ndsar2020.php",
        table: "#ndsar2020",
        fields: [{
            label: "Nomor Nota Dinas:",
            name: "no_ndsar",
            def: "000\/AGA.01.01\/MBSARPP\/2020"
        }, {
            label: "Tgl Nota Dinas:",
            name: "tgl_ndsar",
            type: "date",
            def: function () {
                return new Date();
            },
            format: 'DD/MM/YYYY'
        }, {
            label: "Surat:",
            name: "surat"
        }, {
            label: "Tgl Surat:",
            name: "tgl_surat",
            type: "date",
            def: function () {
                return new Date();
            },
            format: 'DD/MM/YYYY'
        }, {
            label: "Keterangan:",
            name: "keterangan",
            type: "textarea"
        }, {
            label: "Perihal:",
            name: "hal",
            type: "select",
            options: [{
                    label: "Survey/KKP",
                    value: "1"
                },
                {
                    label: "SPBJ",
                    value: "2"
                },
                {
                    label: "PDL",
                    value: "3"
                }
            ]

        }]
    });

    var table = $('#ndsar2020').DataTable({
        lengthChange: false,
        ajax: "Ajax/ndsar2020.php",
        lengthChange: false,
        scrollY: 300,
        scrollCollapse: true,
        info: false,

        columns: [{
                data: "no_ndsar"
            },
            {
                data: "tgl_ndsar"
            },
            {
                data: "surat"
            },
            {
                data: "tgl_surat"
            },
            {
                data: "keterangan",

            },
            {
                data: "hal",
                "render": function (val, type, row) {
                    return val == 1 ? "Survey/KKP" :
                        val == 2 ? "SPBJ" : val == 3 ? "PDL" : "";
                }

            }
        ],
        select: true
    });

    // Display the buttons
    new $.fn.dataTable.Buttons(table, [{
            extend: "create",
            editor: editor
        },
        {
            extend: "edit",
            editor: editor
        },
        {
            extend: "remove",
            editor: editor
        }
    ]);

    table.buttons().container()
        .appendTo($('.col-md-6:eq(0)', table.table().container()));
});

and here my script for pelanggan2020

var editor; // use a global for the submit and return data rendering in the examples

$(document).ready(function () {
    $.fn.dataTable.moment('DD/MM/YYYY');
    editor = new $.fn.dataTable.Editor({
        ajax: "Ajax/pelanggan2020.php",
        table: "#pelanggan2020",
        fields: [{
            label: "Nama Pelanggan:",
            name: "nama_pelanggan"
        }, {
            label: "ID Pelanggan:",
            name: "idpel"
        }, {
            label: "Tarif Lama:",
            name: "tarif_lama"
        }, {
            label: "Daya Lama:",
            name: "daya_lama"
        }, {
            label: "Tarif Baru:",
            name: "tarif_baru"
        }, {
            label: "Daya Baru:",
            name: "daya_baru"
        }, {
            label: "Jumlah Pelanggan:",
            name: "jumlah"
        }, {
            label: "Alamat:",
            name: "alamat"
        }, {
            label: "Daerah Kerja:",
            name: "daerah_kerja"
        }, {
            label: "Kontak:",
            name: "kontak"


        }]
    });

    var table = $('#pelanggan2020').DataTable({
        lengthChange: false,
        ajax: "Ajax/pelanggan2020.php",
        lengthChange: false,
        scrollY: 300,
        scrollCollapse: true,
        info: false,

        columns: [{
                data: "nama_pelanggan"
            },
            {
                data: "idpel"
            },
            {
                data: "tarif_lama"
            },
            {
                data: "daya_lama"
            },
            {
                data: "tarif_baru"

            },
            {
                data: "daya_baru"

            },
            {
                data: "jumlah"

            },
            {
                data: "alamat"

            },
            {
                data: "daerah_kerja"

            },
            {
                data: "kontak"
            }
        ],
        select: true
    });

    // Display the buttons
    new $.fn.dataTable.Buttons(table, [{
            extend: "create",
            editor: editor
        },
        {
            extend: "edit",
            editor: editor
        },
        {
            extend: "remove",
            editor: editor
        }
    ]);

    table.buttons().container()
        .appendTo($('.col-md-6:eq(0)', table.table().container()));
});

Collin, would you give me suggestion, how to create singel Ajax request, the use
-> data() to get the data and then dump it to JSON ??? I have searched various literature from yesterday, and no found solution

heissen

Sorry, I mean Allan...

allan

You have the tables pointing to two different files:

ajax: "Ajax/pelanggan2020.php",

and

        ajax: "Ajax/ndsar2020.php",

Assuming they each return their own JSON object, that should be all that is needed. If they are both returning the data for both tables, that then is an error in the controller.

Allan

heissen

Thanks Allan,
So, the problem in the controller. What should i do now to clear last JSON data when i access new url ?

heissen

Solved,
I create new EditorLib file to make singel Ajax response. thanks Allan, you're just awsome.....