How to put Server-side "Row details" into Editor "Basic initialisation"?

Boomthabox

I am new to datatables and I am trying to put Server-side "Row details" (Row details) into Editor "Basic initialisation" and keep the editing funktions. What I mean in that I am trying to put show and hide child rows on Editor "Basic initialisation".
Is there anybody out there that knows how to do this? Thanks in advance!

allan

You should be able to use the code from the row details example combined with the Editor setup. Perhaps you can show me what you’ve got so far, along with a description of any errors you are getting or even better, a link to the page.

Thanks,
Allan

Boomthabox

Thanks for the reply

I am using the Editor example "server-side-processing" but when I add row details I can not open the row details as you can see on the link below (it selects the line over the button).

The error when you click the button:
Uncaught ReferenceError: table is not defined server-side-processing.html:122
var row = table.row( tr );

I still want to be able to select the line and use the New, Edit and Delete buttons (but also next to the buttons at the left have the "Show entries" which does not come up now either).

Here is my link:
http://www.deltor.se/Editor-PHP-1.9.3/examples/simple/server-side-processing.html

Hope you can help me to solve this
Thanks in advance!

kthorngren

You need to get an instance of the Datatables API and assign it to the var table. Line 89 will work for this, change it to var table = $('#example').DataTable( {.

Kevin

Boomthabox

Ah ok, thanks Kevin and also Allan for the help! Now it seems to work nice

There is one more function that I would like to add to this script and that is the "Show (10, 25, 50, 100) entries" on the left side of the buttons. I try to add the function but it will not appear.

Hope you can help me to solve this also
Thanks in advance!

/Alex

kthorngren

See this FAQ.

Kevin

Boomthabox

I am trying to use this:

$(document).ready(function() {
$('#example').DataTable( {
dom: 'Bfrtip',
lengthMenu: [
[ 10, 25, 50, -1 ],
[ '10 rows', '25 rows', '50 rows', 'Show all' ]
],
buttons: [
'pageLength'
]
} );
} );

But get this message:
DataTables warning: table id=example - Cannot reinitialise DataTable. For more information about this error, please see http://datatables.net/tn/3

/Alex

tangerine

You are initialising your table:

var table = $('#example').DataTable( {
        dom: "Bfrtip",

then you are trying to initialise the same table again:

$(document).ready(function() {
    $('#example').DataTable( {

You can't do that. Hence the srror message. Did you follow the link provided in the error message?

Boomthabox

It is the search function that made problems I think, now it is working but the search function will not work if you search on something.

DataTables warning: table id=example - Unknown field: (index 0)

I am trying to get this to work because I read in the forum this could be the problem:
Add "searchable: false" to the first column configuration and it will start working!

I am not sure I put the "searchable: false" right where it should be but I hope someone can help me out and if this is the problem.

kthorngren

Add "searchable: false" to the first column configuration and it will start working!

That would depend on the problem it solved.

I am not sure I put the "searchable: false" right where it should be but I hope someone can help me out and if this is the problem.

The columns.searchable docs show how to use it.

DataTables warning: table id=example - Unknown field: (index 0)

You will need to debug your server scrip to see what it is returning. Sounds like the data is not is in the correct format. You can use the browser's network inspector to see what is returned when searching. See this technote for steps.

If you need help please post a link to your page or a test case replicating the issue.
https://datatables.net/manual/tech-notes/10#How-to-provide-a-test-case

Kevin

Boomthabox

Thanks for the reply Kevin. I tryed to use network inspector but it does not show anything that I can see more then "DataTables warning: table id=example - Unknown field: (index 0)".

This is the link:
http://www.deltor.se/Editor-PHP-1.9.3/server-side-processing.html

Hope you can help me to solve this
Thanks in advance!

/Alex

kthorngren

When performing a search the response is this:

{
    "fieldErrors": [],
    "error": "Unknown field:  (index 0)",
    "data": [],
    "ipOpts": [],
    "cancelled": []
}

The problem is with the server script. That looks like a response to an Editor operation (Edit, Create, Delete) not a response to a search as described in the Server Side Processing docs. Are you using Datatables provided scripts or your own? Can you post the script?

Kevin

Boomthabox

I am using Datatables provided script server-side (server-side-processing.html). I have added pageLength button and Row details:

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

/* Formatting function for row details - modify as you need */
function format ( d ) {
    // `d` is the original data object for the row
    return 'Full name: '+d.name+'
'+
        'Registration date: '+d.extn+'
'+
        'Comments: And any further details here (images etc)...
';
}

$(document).ready(function() {
    editor = new $.fn.dataTable.Editor( {
        "ajax": "controllers/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"
            }
        ]
    } );


var table = $('#example').DataTable( {
        dom: "Bfrtip",
        ajax: {
            url: "controllers/staff.php",
            type: "POST"
        },
        serverSide: true,
        columns: [
            {
                "className":      'details-control',
                "orderable":      false,
                "data":           null,
                "defaultContent": ''
            },
            { data: "first_name" },
            { data: "last_name" },
            { data: "position" },
            { data: "office" },
            { data: "start_date" },
            { data: "salary", render: $.fn.dataTable.render.number( ',', '.', 0, '$' ) }
        ],
        select: true,
        buttons: [
            { extend: "pageLength" },
            { extend: "create", editor: editor },
            { extend: "edit",   editor: editor },
            { extend: "remove", editor: editor }
        ],
        "order": [[1, 'asc']]
    } );
     
    // Add event listener for opening and closing details
    $('#example tbody').on('click', 'td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = table.row( tr );
 
        if ( row.child.isShown() ) {
            // This row is already open - close it
            row.child.hide();
            tr.removeClass('shown');
        }
        else {
            // Open this row
            row.child( format(row.data()) ).show();
            tr.addClass('shown');
        }
    } );
} );

    

kthorngren

The code you posted is the client script. My questions are about the script at controllers/staff.php.

Kevin

Boomthabox

This was the solution "searchable": false,