How to connect and use function fnAddDataAndDisplay

mgarikm · July 2017

Allan, Help please. I can not understand in any way how to connect and use function fnAddDataAndDisplay. The datatables.net/plug-ins/api/fnAddDataAndDisplay page does not understand anything. Show what code and where to add in a simple example:

<script type="text/javascript" language="javascript" class="init">

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

            $(document).ready(function () {
                editor = new $.fn.dataTable.Editor({
                    ajax: "../php/staff.php",
                    table: "#example",
                    fields: [{
                            label: "First name:",
                            name: "first_name"
                        }, {
                            label: "Last name:",
                            name: "last_name"
                        }, {
                            label: "Position:",
                            name: "position"
                        }, {
                            label: "Office:",
                            name: "office"
                        }, {
                            label: "Extension:",
                            name: "extn"
                        }, {
                            label: "Start date:",
                            name: "start_date",
                            type: "datetime"
                        }, {
                            label: "Salary:",
                            name: "salary"
                        }
                    ]
                });

                $('#example').DataTable({
                    dom: "Bfrtip",
                    ajax: "../php/staff.php",
                    columns: [
                        {data: null, render: function (data, type, row) {
                                // Combine the first and last names into a single table field
                                return data.first_name + ' ' + data.last_name;
                            }},
                        {data: "position"},
                        {data: "office"},
                        {data: "extn"},
                        {data: "start_date"},
                        {data: "salary", render: $.fn.dataTable.render.number(',', '.', 0, '$')}
                    ],
                    select: true,
                    buttons: [
                        {extend: "create", editor: editor},
                        {extend: "edit", editor: editor},
                        {extend: "remove", editor: editor}
                    ]
                });
            });

        </script>
    </head>
    <body class="dt-example">
        <div class="container">
            <section>
                <h1>Editor example <span>Basic initialisation</span></h1>
                <div class="demo-html"></div>
                <table id="example" class="display" cellspacing="0" width="100%">
                    <thead>
                        <tr>
                            <th>Name</th>
                            <th>Position</th>
                            <th>Office</th>
                            <th>Extn.</th>
                            <th>Start date</th>
                            <th>Salary</th>
                        </tr>
                    </thead>
                    <tfoot>
                        <tr>
                            <th>Name</th>
                            <th>Position</th>
                            <th>Office</th>
                            <th>Extn.</th>
                            <th>Start date</th>
                            <th>Salary</th>
                        </tr>
                    </tfoot>
                </table>
            </section>
        </div>
    </body>

I'm already tired to understand myself. Thank you!

allan · July 2017

Hi,

The fnAddDataAndDisplay plug-in is for the legacy API. I'd suggest avoiding that if you can.

Instead use this plug-in which you could utilise in the submitComplete Editor event.

Regards,
Allan

mgarikm · July 2017

Many thanks for the help !!!

mgarikm · July 2017

I did, but nothing happens:

       var table = $('#example').DataTable({
            dom: "Bfrtip",
            ajax: "../php/staff.php",
            columns: [
                {data: null, render: function (data, type, row) {
                        // Combine the first and last names into a single table field
                        return data.first_name + ' ' + data.last_name;
                    }},
                {data: "position"},
                {data: "office"},
                {data: "extn"},
                {data: "start_date"},
                {data: "salary", render: $.fn.dataTable.render.number(',', '.', 0, '$')}
            ],
            select: true,
            buttons: [
                {extend: "create", editor: editor},
                {extend: "edit", editor: editor},
                {extend: "remove", editor: editor}
            ]
        });

editor.on( 'submitComplete', function () {
  table.page.jumpToData('Garrett Winters', 0);
} );

allan · July 2017

Yes, that particular column won't work like that since it has null data (it is the renderer which creates the information to display, but columns.data is null). Combine that with the fact thatpage.jumpToData()uses-api column().data()` and it fails.

If you used any of the other columns it work work!

Perhaps there needs to be a page.jumpToDisplayedData() plug-in (which would use cells().render() to get the displayed data)...

Thanks,
Allan

mgarikm · July 2017

Hi, Allan!
I did what I need (jump to the page with the added row and select this row). Everything is working. I did it like this:

editor.on('submitComplete', function (data, action, row) {
            var rowIdxJamp = row.id;
            table.page.jumpToData(rowIdxJamp, 0);

// Find indexes of rows which have rowIdxJamp in the first column 
            var indexes = table.rows().eq(0).filter(function (rowIdx) {
                return table.cell(rowIdx, 0).data() === rowIdxJamp ? true : false;
            });

// Select the added row
            table.row(indexes).select();

        });

Thanks for the quick help!

mgarikm · July 2017

Hi, Allan!
I'm trying to use plugin page.jumpToData() https://datatables.net/plug-ins/api/page.jumpToData() with example Parent / child editing with Editor datatables.net/blog/2016-03-25 .

This code works with the parent table:

 parentEditor.on('submitComplete', function (data, action, row) {

            var rowIdxJamp = row.id;
            parentTable.page.jumpToData(rowIdxJamp, 0);
// Find indexes of rows which have rowIdxJamp in the first column 
            var indexes = parentTable.rows().eq(0).filter(function (rowIdx) {
                return parentTable.cell(rowIdx, 0).data() === rowIdxJamp ? true : false;
            });
// Select the added row
            parentTable.row(indexes).select();
            console.log(indexes);

        });

In the console log: [12, context: Array(1), selector: Object, tables: function, table: function, draw: function…]

But with the children table does not work:

        childEditor.on('submitComplete', function (data, action, row) {

            var rowIdxJamp = row.id;
            childTable.page.jumpToData(rowIdxJamp, 0);
// Find indexes of rows which have rowIdxJamp in the first column 
            var indexes = childTable.rows().eq(0).filter(function (rowIdx) {
                return childTable.cell(rowIdx, 0).data() === rowIdxJamp ? true : false;
            });
// Select the added row
            childTable.row(indexes).select();
            console.log(indexes);

        });

In the console log: [context: Array(1), selector: Object, tables: function, table: function, draw: function…]

How to fix it?

allan · July 2017

I'd really need a link to the page showing the issue to fully understand the code.

Allan

mgarikm · July 2017

Hi, Allan!
Unfortunately, when I tried to run the editor on the host of the provider, I found out that I can not do this, since the hoster basically disconnected the use of triggers and other stored procedures.
It turns out that your program will not work for me on hosting. You can remove from your program the need to use triggers? What should I do? Sincerely.

mgarikm · July 2017

error log:
[Sat Jul 29 14:38:35 2017] [error] [client 188.43.8.xxx] PHP Parse error: syntax error, unexpected T_STRING, expecting T_CONSTANT_ENCAPSED_STRING or '(' in /home/u211591/test.mochily.ru/www/Editor-PHP-1.6.3/examples/php/todo.php on line 15, referer: http://www.test.mochily.ru/Editor-PHP-1.6.3/examples/simple/fieldTypes.html

tangerine · July 2017

I don't understand what you are trying to do on the link you posted.
Clearly there is a syntax error in todo.php. Can't you fix it? Where did you get the file from?

mgarikm · July 2017

I'm trying to run examples on the hosting and they do not work. On the local server, everything works fine.
File from: https://editor.datatables.net/download/download?type=php

<?php

/*
 * Example PHP implementation for the client-side table formatting example.
 * This is basically the same as the 'fieldTypes' example, but in this case
 * note that there is no server-side formatting of the 'done' field - rather it
 * is done in the DataTable in this example
 */

// DataTables PHP library
include( "../../php/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;

// Build our Editor instance and process the data coming from _POST
Editor::inst( $db, 'todo' )
    ->fields(
        Field::inst( 'item' ),
        Field::inst( 'done' ),
        Field::inst( 'priority' )
    )
    ->process( $_POST )
    ->json();

mgarikm · July 2017

I was inattentive. The editor did not work, because on hosting was PHP 5.2.17-2 + mh3. Installed PHP 5.6 and everything worked fine.

allan · August 2017

Thanks for posting back. PHP name spaces were added in PHP 5.3, and anything older than that will throw a syntax error sadly.

Allan

mgarikm · August 2017

Hi, Allan!
I fixed my problem. Plugin page.jumpToData() https://datatables.net/plug-ins/api/page.jumpToData() working with example: Parent / child editing with Editor datatables.net/blog/2016-03-25
In this case:
1) Parent / child editing with Editor;
2) Plugin page.jumpToData();
3) Added rows are selected;
4) 'dblclick' row open Form for edite;
5) Duplicate button for Child table
Allan, look at my example: test.mochily.ru/Editor-PHP-1.6.3/examples/plug-ins/ParentChild.html
Maybe there is a more elegant solution?
Thank you very much for your help!
Sincerely, mgarikm!

allan · August 2017

That's a really nice layout - thanks for posting the link. It looks good to me.

Allan

mgarikm · August 2017

For the correct operation of the 'select', a switch has been added such as rebooting the data of the child table when selecting a row in the parent table, after adding a row to the child table:

var trig = 0; //is needed to store the value for the switch type data reload table
            $(document).ready(function () {
...

                //Selecting rows
                parentTable.on('select', function (data, action, row) {
//Switch type data reload table
//if the row of the parent table is selected after adding a row to the child table
            if (trig === 0) {
                childTable.ajax.reload();
             } else {
//if you do not install (null, false) the plugin page.JumpToData() will not work                   
                childTable.ajax.reload(null, false);
                trig = 0;
            }
...
                });

//childEditor
                childEditor.on('submitComplete', function (data, users, row) {
//check the passed value                    
                    if (users.data.length !== 0) {
                        var rowIdxJampCh = row.users.id;
                        trig = 1;
                    }
//use plug-in page.JumpToData()                    
 ...
                });

How to connect and use function fnAddDataAndDisplay

How to connect and use function fnAddDataAndDisplay

Answers

Howdy, Stranger!

Categories

DataTables

How to connect and use function fnAddDataAndDisplay

How to connect and use function fnAddDataAndDisplay

Answers

Howdy, Stranger!

Quick Links

Categories

DataTables