Update data on the server

ostmal · June 2021

I'm sorry to distract you from important things! I learned how to make changes to the selected lines:

var selected_rows = table.rows( { selected: true } );
selected_rows.every(function (rowIdx, tableLoop, rowLoop) {
    table.cell(rowIdx, 6).data("test");
})
.draw();

But I can't understand it for several hours (I reread the documentation) how to update this data on the server. Help please.

colin · June 2021

Yep, cell().data() only changes data in the table. To update on the server, you'll need to use the Editor API, methods such as edit().

This example from this thread should get you going, as it's demonstrating that.

Hope that helps,

Colin

ostmal · June 2021

Thank you very much, Colin!

ostmal · June 2021

Colin, thank you, I used your example. Here's what I did:

        for (var i=0; i < selected_rows.count(); i++) {
            console.log(i);
            console.log(selected_rows.ids()[i])
            editor.edit('#' + selected_rows.ids()[i], false);
            editor.field('crm_okr_gd').set("test");
            editor.submit();
        }

But for some reason, the field value is set only in the first line (even if a lot is selected), although the cycle passes normally through all the selected lines! Please take a look, what's wrong?

colin · June 2021

That looks like it should work, as it's basically the same code in the example that I posted. Are you able to link to your page, or update my test from before, so we can debug this, please.

Colin

ostmal · June 2021

Mysticism! Look, this is a test page (the button at the bottom is on the left):
http://www.a0250268.xsph.ru/index.php

HTML

<!doctype html>
<html>
<head>

    <meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <link rel="stylesheet" href="/abc_crm/dt/my/crm.css" type="text/css" />

    <title>CRM-1</title>

    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/v/dt/jqc-1.12.4/moment-2.18.1/dt-1.10.25/b-1.7.1/date-1.1.0/fc-3.3.3/fh-3.1.9/kt-2.6.2/sl-1.3.3/datatables.min.css">
    <!-- Индивидуальный поиск по столбцам -->
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.25/css/jquery.dataTables.min.css">
    <link rel="stylesheet" type="text/css" href="/abc_crm/dt/prog/css/generator-base.css">
    <link rel="stylesheet" type="text/css" href="/abc_crm/dt/prog/css/editor.dataTables.min.css">

    <script type="text/javascript" charset="utf-8" src="https://cdn.datatables.net/v/dt/jqc-1.12.4/moment-2.18.1/dt-1.10.25/b-1.7.1/date-1.1.0/fc-3.3.3/fh-3.1.9/kt-2.6.2/sl-1.3.3/datatables.min.js"></script>
    <script type="text/javascript" charset="utf-8" src="/abc_crm/dt/prog/js/dataTables.editor.min.js"></script>

    <script type="text/javascript" charset="utf-8" src="/abc_crm/dt/my/kv/kv.js"></script>
</head>

    <body class="dataTables">
        <div class="container">
            <table cellpadding="0" cellspacing="0" border="0" class="display" id="aaa_kv" width="100%">
                <thead>
                    <tr>
                        <th>id</th>
                        <th>fields</th>
                    </tr>
                </thead>
            </table>
        </div>
        <button type="submit" id="button_save_date_time">Save the current date-time in the selected rows ("fields")</button>
    </body>
</html>

JS

(function($){
$(document).ready(function() {
    var editor = new $.fn.dataTable.Editor( {
        ajax: '/abc_crm/dt/my/kv/kv.php',
        table: '#aaa_kv',
        fields: [
            {
                label: "fio:",
                name: "fio_name"
            }
        ]
    } );

    var table = $('#aaa_kv').DataTable( {
        dom: 'Bfrtip',
        ajax: '/abc_crm/dt/my/kv/kv.php',
        paging: true,
        columns: [
            {data: "id"},
            {data: "fio_name"}
        ],
        select: true,
        lengthChange: false,
        buttons: [
            { extend: 'create', editor: editor },
            { extend: 'edit',   editor: editor },
            { extend: 'remove', editor: editor }
        ]
    } );

    $("#button_save_date_time").click(function(){
        var selected_rows = table.rows( { selected: true } );
        var count = selected_rows.count();
        console.log(count); // count of selected rows

        ttt = new Date();
        now_date_time = ttt.getFullYear() + "-" + (ttt.getMonth()+1) + "-" + ttt.getDate() + " " + ttt.getHours() + ":" + ttt.getMinutes() + ":" + ttt.getSeconds();

        for (var i=0; i < selected_rows.count(); i++) {
            console.log(i);
            console.log(selected_rows.ids()[i])
            editor.edit('#' + selected_rows.ids()[i], false);
            editor.field('fio_name').set(now_date_time);
            editor.submit();
        }
    });
} );
}(jQuery));

PHP

<?php
// DataTables PHP library and database connection
include( "../../prog/php/lib/DataTables.php" );

// Alias Editor classes so they are easy to use
use
    DataTables\Editor,
    DataTables\Editor\Field,
    DataTables\Editor\Format,
    DataTables\Editor\Mjoin,
    DataTables\Editor\Options,
    DataTables\Editor\Upload,
    DataTables\Editor\Validate,
    DataTables\Editor\ValidateOptions;

// Build our Editor instance and process the data coming from _POST
Editor::inst( $db, 'aaa_fio', 'id' )
    ->fields(
        Field::inst( 'id' ),
        Field::inst( 'fio_name' )
    )
    ->process( $_POST )
    ->json();

kthorngren · June 2021

Its interesting that after selecting two rows only the first is submitted to the server - seeing this in the network inspector. The problem might be that you are loading jquery twice which is generally not recommended. On line 39 you have this:

<script src="/media/jui/js/jquery.min.js?1128ab390add5c848f1d8345c2bf2126"></script>

The bundled datatables include you have on line 100 also includes jquery:

 * Included libraries:
 *  jQuery 1.12.4, Moment 2.18.1, DataTables 1.10.25, Buttons 1.7.1, DateTime 1.1.0, FixedColumns 3.3.3, FixedHeader 3.1.9, KeyTable 2.6.2, Select 1.3.3

You can open the link in the include file to regenerate the bundle without jquery. Let us know if this helps.

Kevin

Update data on the server

Update data on the server

Answers

Howdy, Stranger!

Categories

DataTables

Update data on the server

Update data on the server

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables