Cascading lists in Editor: please explain

Cascading lists in Editor: please explain

ostmalostmal Posts: 13Questions: 3Answers: 0

Hello! I recently started studying DataTables. Stopped with dependent fields. I looked at a lot of examples and still a lot is unclear.

There is a classic example:
https://datatables.net/blog/2017-09-01

It is often pointed at. And it is important for me to understand.
It would be nice to decipher it a bit:
1. I don't understand: how many tables are there in the Database? As far as I understand 4:
Table 1- for filling in
Table 2 - " Continents»
Table 3 - " Countries»
Table 4 – " id_Сontinent-id_ Country»
2. I really want to see the "JavaScript" code
3. editor.dependent ('continent', '/ api/countries' );
the Second argument «/ api/countries» what is it?
4. Do I understand correctly that in this example there are actually two Server script (PHP files)? I'd like to see both.
I'm sorry, I'm still at the beginner level and I need your help.

Answers

  • colincolin Posts: 8,013Questions: 0Answers: 1,348
    1. There would be three tables: the person, then countries, and the continents
    2. Right cick on the page and select "View source" - you can see it there.
    3. That's the URL for the ajax call - see usage for dependent()
    4. Yep, exactly. Similar scripts are in the download package, so they can be used for reference

    Hope that helps,

    Colin

  • ostmalostmal Posts: 13Questions: 3Answers: 0

    Thank you very much, Colin, for your prompt support. I would like to clarify the points.
    1. I understand that the "countries" Table has an id – continents field to organize the "continent-country" match.
    2. I looked at the code, thank you.
    3. I have read the "dependent ()" documentation many times. Some things are not clear to me, perhaps my questions will seem primitive. Your code first calls (ajax) " url: /media/blog/2017-09-01/data . And then, by independent (): /media/blog/2017-09-01/countries . I don't quite understand what PHP files should be called? Or why is there no file name?

  • colincolin Posts: 8,013Questions: 0Answers: 1,348

    If you call it by hand, https://datatables.net/media/blog/2017-09-01/countries, you'll see that this is the end point - you can either have .php on the end or not. That is the URL that's being called by the script - apart from when you run it by hand, the data part isn't being submitted (see "submit data" for that part of the dependent() documentation).

    Colin

  • ostmalostmal Posts: 13Questions: 3Answers: 0

    Thanks for the answer.
    I'm sorry, I didn't quite understand. If we consider Your example:
    https://datatables.net/blog/2017-09-01
    There, the construction is used to respond to changes in the "Continent" field:
    editor.dependent( 'continent', '/api/countries' );
    Below, in this example, you have shown options for the server code that should handle this request. In particular, the version of PHP:
    include_once( $_SERVER['DOCUMENT_ROOT']."/php/DataTables.php" );

    include_once( $_SERVER['DOCUMENT_ROOT']."/php/DataTables.php" );
     
    $countries = $db
        ->select( 'country', ['id as value', 'name as label'], ['continent' => $_REQUEST['values']['continent']] )
        ->fetchAll();
     
    echo json_encode( [
        'options' => [
            'country' => $countries
        ]
    ] );
    

    Question: what should I call this script and where should I put it so that it is called?

  • allanallan Posts: 51,411Questions: 1Answers: 7,752 Site admin

    Question: what should I call this script and where should I put it so that it is called?

    In the example above it would be called countries.php (with the web-server setup not to require the .php extension) and in the api directory of the web-server's root.

    So really, you can put it anywhere you want in your web-server's directory structure and call the file what you like - you just need to update the dependent() call to make sure it knows where the file is - e.g. if you put it into {web-root}/admin/scripts/options.php you'd update the dependent() call to be:

    editor.dependent( 'fieldName', '/admin/scripts/options.php' );
    

    Allan

  • ostmalostmal Posts: 13Questions: 3Answers: 0

    Thanks. I was confused by the lack of an extension for the file. I understood.

  • ostmalostmal Posts: 13Questions: 3Answers: 0

    I'm sorry to bother you. I'm still learning, and I'm not getting it right yet.
    For training, I tried to reproduce the Continents – Countries model, as here:
    https://datatables.net/blog/2017-09-01
    I have 3 tables:

    person:
    *id
    *name (varchar)
    *continent (int)
    *country (int)
    continents:
    *id (int)
    *name (varchar)
    countries:
    *id
    *id_continents (int)
    *name (varchar)

    JS:

    (function($){
    
    $(document).ready(function() {
        var editor = new $.fn.dataTable.Editor( {
            ajax: '/abc/w_lesson_datatable/dt-10/php/table.dt_10.php',
            table: '#dt_10',
            fields: [
                {
                    "label": "Name:",
                    "name": "person.name"
                },{
                    "label": "Continent:",
                    "name": "person.continent",
                    type: "select",
                    placeholder: "Select continent"
                },{
                    "label": "Country:",
                    "name": "person.country",
                    type: "select",
                    placeholder: "Select country"
                }
            ]
        } );
    
        editor.dependent( 'person.continent', '/abc/w_lesson_datatable/dt-10/php/dependent_continent_country.php' );
    
        var table = $('#dt_10').DataTable( {
            dom: 'Bfrtip',
            ajax: '/abc/w_lesson_datatable/dt-10/php/table.dt_10.php',
            columns: [
                {"data": "person.name"},
                {"data": "continents.name"},
                {"data": "countries.name"}
            ],
            select: true,
            lengthChange: false,
            buttons: [
                { extend: 'create', editor: editor },
                { extend: 'edit',   editor: editor },
                { extend: 'remove', editor: editor }
            ]
        } );
    } );
    
    }(jQuery));
    

    PHP:

    <?php
    
    error_reporting(E_ALL);
    ini_set('display_errors', '1');
    
    
    // DataTables PHP library and database connection
    include( "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;
    
    
    
    Editor::inst( $db, 'person')
        ->field(
        Field::inst( 'person.name' ),
    
        // field "continent"
        Field::inst( 'person.continent' )
            ->options( Options::inst()
                ->table( 'continents' )
                ->value( 'id' )
                ->label( 'name' )
            )
            ->validator( Validate::dbValues() ),
        Field::inst( 'continents.name' ),
    
        // field "country"
        Field::inst( 'person.country' )
            ->options( Options::inst()
                ->table( 'countries' )
                ->value( 'id' )
                ->label( 'name' )
            )
            ->validator( Validate::dbValues() ),
        Field::inst( 'countries.name' )
    
        )
        ->leftJoin( 'continents', 'continents.id', '=', 'person.continent' )
        ->leftJoin( 'countries', 'countries.id', '=', 'person.country' )
    
        ->process( $_POST )
        ->json();
    
    

    PHP (for dependent())

    <?php
    
    error_reporting(E_ALL);
    ini_set('display_errors', '1');
    
    
    // DataTables PHP library and database connection
    include_once( "lib/DataTables.php" );
    
    
        $countries = $db
            ->select( 'countries', ['id as value', 'name as label'], ['continents' => $_REQUEST['values']['id_continent']] )
            ->fetchAll();
    
        echo json_encode( [
            'options' => [
                'country' => $countries
            ]
        ] );
    

    The table displays great! Editor-ок, but dependent(), cascading fields - doesn't work!
    I made a mistake somewhere.

  • allanallan Posts: 51,411Questions: 1Answers: 7,752 Site admin

    Heh - I loose count of how many mistakes I make each day...!

    Are you getting any error messages? Something that might guide us in what is going wrong?

    Thanks,
    Allan

Sign In or Register to comment.