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

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

loukinglouking Posts: 259Questions: 52Answers: 0

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

This question has accepted answers - jump to:

Answers

  • colincolin Posts: 15,118Questions: 1Answers: 2,583

    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

  • loukinglouking Posts: 259Questions: 52Answers: 0

    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)

  • loukinglouking Posts: 259Questions: 52Answers: 0

    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
    
  • colincolin Posts: 15,118Questions: 1Answers: 2,583

    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

  • loukinglouking Posts: 259Questions: 52Answers: 0

    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.

  • loukinglouking Posts: 259Questions: 52Answers: 0

    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.

  • tangerinetangerine Posts: 3,342Questions: 35Answers: 394
    Answer ✓

    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

  • kthorngrenkthorngren Posts: 20,150Questions: 26Answers: 4,736
    Answer ✓

    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

  • loukinglouking Posts: 259Questions: 52Answers: 0

    Uh, of course you're right. Thanks!

  • loukinglouking Posts: 259Questions: 52Answers: 0

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

This discussion has been closed.