Quantcast
Channel: Free community support — DataTables forums
Viewing all articles
Browse latest Browse all 35361

I can't get rows in my datatable...

$
0
0

Hi!

First of all, thank you for sharing this great plugin!
I'm completely newbie in this scope, but i'm very enthusiastic! :)
I try to make my first datatable (server-side with row details), like i saw on the page https://datatables.net/examples/server_side/row_details.html
HTML + Javascript:

`<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <link rel="shortcut icon" type="image/ico" href="https://www.datatables.net/favicon.ico">
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=2.0">
    <title>TVEP - Tagok adatbázis</title>
    <link rel="stylesheet" type="text/css" href="media/css/jquery.dataTables.css">
    <link rel="stylesheet" type="text/css" href="resources/syntax/shCore.css">
    <link rel="stylesheet" type="text/css" href="resources/demo.css">
    <style type="text/css" class="init">
    
td.details-control {
    background: url('resources/details_open.png') no-repeat center center;
    cursor: pointer;
}
tr.details td.details-control {
    background: url('resources/details_close.png') no-repeat center center;
}

    </style>
    <script type="text/javascript" language="javascript" src="//code.jquery.com/jquery-1.12.4.js">
    </script>
    <script type="text/javascript" language="javascript" src="media/js/jquery.dataTables.min.js">
    </script>
    <script type="text/javascript" language="javascript" src="resources/syntax/shCore.js">
    </script>
    <script type="text/javascript" language="javascript" src="resources/demo.js">
    </script>
    <script type="text/javascript" language="javascript" class="init">

function format ( d ) {
    return 'Lakcím: '+d.tagok_irszam+' '+d.tagok_varos+' '+d.tagok_utca+'<br>'+
        'Szolgáltatásra jogosult: '+d.tagok_szolgaltatasra_jogosult+'<br>'+
        'Azonosítva?: '+d.tagok_is_azonositva+'<br>'+
        'Születési dátum: '+d.tagok_szuletesidatum+'<br>'+
        'Telefonszám: '+d.tagok_telefonszam+'<br>'+
        'TAJ szám: '+d.tagok_tajszam+'<br>'+
        'E-mail: '+d.tagok_email+'<br>'+
        'Tagdíj fizetés módja: '+d.tagok_tagdijbefizetes_modja+'<br>'+
        'AAAA';
}

$(document).ready(function() {
    var dt = $('#example').DataTable( {
        "processing": true,
        "serverSide": true,
        "ajax": "server_side/scripts/ids-objects.php",
        "columns": [ 
            {
                "class":          "details-control",
                "orderable":      false,
                "data":           null,
                "defaultContent": ""
            },
            { "data": "tagok_nev" },
            { "data": "tagok_tagkod" },
            { "data": "tagok_ezevben_fizetett_osszes_tagdij" },
            { "data": "tagok_hatralek" }
        ],
        "order": [[1, 'asc']]
    } );

    // Array to track the ids of the details displayed rows
    var detailRows = [];

    $('#example tbody').on( 'click', 'tr td.details-control', function () {
        var tr = $(this).closest('tr');
        var row = dt.row( tr );
        var idx = $.inArray( tr.attr('id'), detailRows );

        if ( row.child.isShown() ) {
            tr.removeClass( 'details' );
            row.child.hide();

            // Remove from the 'open' array
            detailRows.splice( idx, 1 );
        }
        else {
            tr.addClass( 'details' );
            row.child( format( row.data() ) ).show();

            // Add to the 'open' array
            if ( idx === -1 ) {
                detailRows.push( tr.attr('id') );
            }
        }
    } );

    // On each draw, loop over the `detailRows` array and show any child rows
    dt.on( 'draw', function () {
        $.each( detailRows, function ( i, id ) {
            $('#'+id+' td.details-control').trigger( 'click' );
        } );
    } );
} );

    </script>
</head>
<body class="dt-example">
    <div class="container">
        <section>
            <h1>TVEP <span>Adatbázis</span></h1>
            <div class="info">
                <p>Tetszés szerinti szöveg lehet itt</p>
            </div>
            <div class="demo-html"></div>
            <table id="example" class="display" cellspacing="0" width="100%">
                <thead>
                    <tr>
                        <th></th>
                        <th>Név</th>
                        <th>Tagkód</th>
                        <th>Idei befizetés összesen</th>
                        <th>Hátralék</th>
                    </tr>
                </thead>
                <tfoot>
                    <tr>
                        <th></th>
                        <th>Név</th>
                        <th>Tagkód</th>
                        <th>Idei befizetés összesen</th>
                        <th>Hátralék</th>
                    </tr>
                </tfoot>
            </table>`

PHP:

`<?php

/*
 * DataTables example server-side processing script.
 *
 * Please note that this script is intentionally extremely simply to show how
 * server-side processing can be implemented, and probably shouldn't be used as
 * the basis for a large complex system. It is suitable for simple use cases as
 * for learning.
 *
 * See http://datatables.net/usage/server-side for full details on the server-
 * side processing requirements of DataTables.
 *
 * @license MIT - http://datatables.net/license_mit
 */

/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * Easy set variables
 */

// DB table to use
$table = 'tagok3';

// Table's primary key
$primaryKey = 'id';

// Array of database columns which should be read and sent back to DataTables.
// The `db` parameter represents the column name in the database, while the `dt`
// parameter represents the DataTables column identifier - in this case object
// parameter names
$columns = array(
    array(
        'db' => 'id',
        'dt' => 'DT_RowId',
        'formatter' => function( $d, $row ) {
            // Technically a DOM id cannot start with an integer, so we prefix
            // a string. This can also be useful if you have multiple tables
            // to ensure that the id is unique with a different prefix
            return 'row_'.$d;
        }
    ),
    array( 'db' => 'tagok_nev', 'dt' => 'tagok_nev' ),
    array( 'db' => 'tagok_tagkod',  'dt' => 'tagok_tagkod' ),
    array(
        'db'        => 'tagok_szolgaltatasra_jogosult',
        'dt'        => 'tagok_szolgaltatasra_jogosult',
        'formatter' => function( $d, $row ) {
            return date( 'jS M y', strtotime($d));
        }
    ),
    array( 'db' => 'tagok_is_azonositva',     'dt' => 'tagok_is_azonositva' ),
    array(
        'db'        => 'tagok_szuletesidatum',
        'dt'        => 'tagok_szuletesidatum',
        'formatter' => function( $d, $row ) {
            return date( 'jS M y', strtotime($d));
        }
    ),
    array( 'db' => 'tagok_telefonszam',     'dt' => 'tagok_telefonszam' ),
    array( 'db' => 'tagok_varos',     'dt' => 'tagok_varos' ),
    array( 'db' => 'tagok_irszam',     'dt' => 'tagok_irszam' ),
    array( 'db' => 'tagok_utca',     'dt' => 'tagok_utca' ),
    array( 'db' => 'tagok_tajszam',     'dt' => 'tagok_tajszam' ),
    array( 'db' => 'tagok_email',     'dt' => 'tagok_email' ),
    array( 'db' => 'tagok_tagdijbefizetes_modja',     'dt' => 'tagok_tagdijbefizetes_modja' ),
    array( 'db' => 'tagok_ezevben_fizetett_osszes_tagdij',     'dt' => 'tagok_ezevben_fizetett_osszes_tagdij' ),
    array( 'db' => 'tagok_hatralek',     'dt' => 'tagok_hatralek' )
);

$sql_details = array(
    'user' => '*******',
    'pass' => '*******',
    'db'   => '*******',
    'host' => 'localhost'
);


/* * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * * *
 * If you just want to use the basic configuration for DataTables with PHP
 * server-side, there is no need to edit below this line.
 */

require( 'ssp.class.php' );

echo json_encode(
    SSP::simple( $_GET, $sql_details, $table, $primaryKey, $columns )
);`

It looks like same as in the example, but unfortunately it doesn't work :(

The site is:
https://uat.tvep.hu/datatable/

And i make debugging too:
https://debug.datatables.net/upikuz

Sorry for my bad english :)

Any help appreciated!

Thanks,

Laci


Viewing all articles
Browse latest Browse all 35361

Trending Articles