https://datatables.net/blog/2019-01-11 jsbin?

louking

Is there a jsbin I can clone, or can you create a jsbin I can clone, which implements https://datatables.net/blog/2019-01-11?

I'm not sure where to find the files which are loaded under the blog via /media/blog/2016-03-25/xxx. I don't think the files mentioned under https://datatables.net/manual/tech-notes/9 are sufficient to implement this child table behavior.

I'm having some trouble with some similar code, and I want to start fiddling with a known working example.

thanks

colin

All the code is contained in that post. At the end of the post, there is also a link to both the JS and CSS.

Colin

louking

Right.

I think I just need to know where to find sites.php and users.php with your data set.

See http://live.datatables.net/gimusaso/1/edit

This gets stuck at "loading" when I try to use (/media/blog/2016-03-25/users.php and ../php/sites.php as is used in the javascript from the post.

I see /media/blog/2016-03-25/sites.php?_=1594721285007:1 Failed to load resource: the server responded with a status of 404 (Not Found)

louking

And if I try to go to https://datatables.net/media/blog/2016-03-25/sites.php directly I get

1:1 Access to XMLHttpRequest at 'https://datatables.net/media/blog/2016-03-25/sites.php?_=1594722042007' from origin 'http://live.datatables.net' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
datatables.net/media/blog/2016-03-25/sites.php?_=1594722042007:1 Failed to load resource: net::ERR_FAILED

colin

Yep, you'll have to host those files yourself, as the PHP will be referring to your database.

The code was explained in the article, but I've pasted it here for easy reference:

sites.php

<?php

/*
 * Example PHP implementation used for the index.html example
 */

// DataTables PHP library
include( $_SERVER['DOCUMENT_ROOT']."/editor/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\Upload,
    DataTables\Editor\Validate;

// Build our Editor instance and process the data coming from _POST
Editor::inst( $db, 'sites' )
    ->fields(
        Field::inst( 'id' )->set( false ), 
        Field::inst( 'name' )
            ->validator( 'Validate::notEmpty' )
            ->validator( 'Validate::unique' )
    )
    ->join( 
        Mjoin::inst( 'users' )
            ->link( 'sites.id', 'users.site' )
            ->fields(
                Field::inst( 'id' )
            )
    )
    ->process( $_POST )
    ->json();

users.php

<?php

// DataTables PHP library
include( $_SERVER['DOCUMENT_ROOT']."/editor/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\Upload,
    DataTables\Editor\Validate;
    
if ( ! isset($_POST['site']) || ! is_numeric($_POST['site']) ) {
    echo json_encode( [ "data" => [] ] );
}   
else {
    Editor::inst( $db, 'users' )
        ->field( 
            Field::inst( 'users.first_name' ),
            Field::inst( 'users.last_name' ),
            Field::inst( 'users.phone' ),
            Field::inst( 'users.site' )
                ->options( 'sites', 'id', 'name' )
                ->validator( 'Validate::dbValues' ),
            Field::inst( 'sites.name' )
        )
        ->leftJoin( 'sites', 'sites.id', '=', 'users.site' )
        ->where( 'site', $_POST['site'] )
        ->process($_POST)
        ->json();
}   

Colin

louking

Thanks. I thought it would be nice to have these files directly available from the live.datables.net jsbin interface, but I'm working on making my native data available cross domain now.

louking

Darn! just realized that since all my code / data is in my development environment it's not going to be available to jsbin even if allowed for cross domain access until I finish development.

Any chance I can convince you to make these tables available to a live.datatables.net jsbin?

What's going on is I have a problem which seems like it might be a datatables problem, but I can't be sure unless I reduce the problem to the working example plus a little bit and reproduce it for you.

The issue is that I'm using select / deselect events on the equivalent of the sites table to cause the users table to be opened in edit mode, but once I open the equivalent of the users table the events don't fire after the table is destroyed. If I use the click event like the example this doesn't happen.

I am using the click event and select events to mean different things in my application so I cannot simply use the click event as a workaround. In my application the click event on td.details-control opens the child row for display, and the select event opens the child row for editing.

tangerine

Can you not apply the json data files provided by live.datatables.net, instead of your database calls? Presuming that the nature of the data is not significant here.
https://datatables.net/manual/tech-notes/9#Using-JS-Bin

kthorngren

Doesn't sound the the problem is with the server interaction but just the process of opening and closing the child Datatables. Here is an example I built before the blog you linked to. It is different, ie, doesn't use destroy(). I think you can use it as a base for your test case to show the problem with using select to open the child rows. You may need to structure it more like the blog code.
http://live.datatables.net/sawiwavi/1/edit

Kevin

louking

Uh, of course you're right. Thanks!

louking

@kthorngren thanks, that should be enough -- thanks!