I can't get rows in my datatable...
I can't get rows in my datatable...
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
Answers
Your
ids-objects.php
file is sending an empty reply which is why you are getting a DataTables error.Try enabling PHP error reporting by adding:
at the top of your PHP script. Also take a look at the server's error logs.
Allan
Hi Allan,
Thanks for quick reply!
But i still don't understand, how could this be, when i use exactly same script, which is in the Datatables examples? I only changed the column names...everything is same in the script, like in the example.
Also I took your advice, and i got only the following php error, which is - as i understand - does not explain, why am i getting empty reply from the database:
Ok, i found the problem, there is only some help in the solution
In my database there is accented characters, and if I remove all the accents, datatables work perfectly!
How can I display accented characters?
Thanks for all your help!!!
Here is the solution, if you're interested
https://datatables.net/forums/discussion/47358
Hi @Webface ,
Take a look at this thread here, it discusses that issue with accented characters.
Cheers,
Colin