datatables with php mysql and have links or options

sades

Hello loving datatables but have a hard time to make them how i really want usually i make my tables with a repeat or do while, but after testing datatables want to try them im using right now

[code]

$(document).ready(function() {
$('#listax').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "./datatables.php"
} );
} );

[/code]

for my html i have
[code]




Title:
Slug:
Category:
Order:







 
 
 
 




[/code]

so far it works great until i try to get my edit and delete buttons my normal way without datatatables is
[code]



Title:
Slug:
Category:
Order:
 




<?php do { ?>

<?php echo($row_page['Title']); ?>
<?php echo($row_page['Slug']); ?>
<?php echo($row_page['pagecatt']); ?>
<?php echo($row_page['Order']); ?>



<?php } while ($row_page = mysql_fetch_assoc($page)); ?>


[/code]

As you can see i have on my last cell some buttons it can even be links or pictures to edit delete or anything else using the id of each element, how can i do this kind of tables with datatables is it even possible i checked most of the examples but have no clue how to accomplish this any tip please on how i can do it?

O also datatables.php is just exactly as the example just changed the database connection and the tables cells

girishmr

Use mRender as follows

[code]
"aoColumnDefs": [
{
"aTargets":[12],
"fnCreatedCell": function(nTd, sData, oData, iRow, iCol)
{
$(nTd).css('text-align', 'center');
},
"mData": null,
"mRender": function( data, type, full) { // You can use as well if you want
return '';
}
}

]
[/code]

sades

That didnt work it is now giving me a javascript error and an empty table

sades

right now i changed the script to this

[code]
$(document).ready(function() {
$('#listax').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "./datatables.php",
"sDom": "Tfrtip",
"aoColumns": [ null, null, null, null,

{
"mData": null,
"sClass": "center",
"sDefaultContent": 'Edit / Delete'
}
]


} );
} );


[/code]

that gives me an error but when i click on the sort it shows the records and even the delete and edit liunks but how can i add the id to where it should go example edit.php?id=1, edit.php?id=2 etc..

The javascript error im getting is:

Timestamp: 20/11/2012 11:36:14 p.m.
Error: TypeError: j[f - d] is undefined
Source File: http://localhost/sitex/admin/js/plugins/dataTables/jquery.dataTables.min.js
Line: 78

sades

Got it working without javascript errors but still no idea how to get the id value for the edit and delete links, thanks girishmr for the help im using your code now

[code]

$(document).ready(function() {
$('#listax').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "./datatables.php",
"aoColumnDefs": [
{
"aTargets":[4],
"fnCreatedCell": function(nTd, sData, oData, iRow, iCol)
{
$(nTd).css('text-align', 'center');
},
"mData": null,
"mRender": function( data, type, full) { // You can use as well if you want
return 'edit';
}
}

]


} );
} );

[/code]

girishmr

Have you added id selector for your code similar to class="reject"? Also you can get the id value only when the page is loaded. In other words when document ready.

You can use your class values as well in place of id since you have it already in the code
Bind a click event on that cell and when the edit/delete is clicked execute our code.

[code]
$(document).ready(function() {
var oListax = $('#listax').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "./datatables.php",
"aoColumnDefs": [
{
"aTargets":[4],
"fnCreatedCell": function(nTd, sData, oData, iRow, iCol)
{
$(nTd).css('text-align', 'center');
},
"mData": null,
"mRender": function( data, type, full) { // You can use as well if you want
return 'edit';
}
}

]

} );

$("#listax td:nth-child(4)").live("click", function (e) {
e.preventDefault();
var nRow = $(this).parents('tr')[0];

var nTr = this.parentNode;
var aData = oListax.fnGetData( nTr );
// aData[0] will have the id value of the record

});
} );
[/code]

sades

Thank you Girishmr to take the time for awnsering ok i try the code you just posted but still its not adding to my link edit.php?id= nothing

i try changing the code

return 'edit';

where i replaced +'$Row'+ with +aData[0]+ but that didnt work and made the table stop working i thgink im almost there im just to frustrated of trying and trying and not able to make it work also why are we using this

[code]
$("#listax td:nth-child(4)").live("click", function (e) {
e.preventDefault();
var nRow = $(this).parents('tr')[0];

var nTr = this.parentNode;
var aData = oListax.fnGetData( nTr );
// aData[0] will have the id value of the record

});
[/code]

it seems like its geting the actual row number but i really need is to get the internal database id i have it like the last column in the database.php

[code]
<?php
/*
* Script: DataTables server-side script for PHP and MySQL
* Copyright: 2010 - Allan Jardine, 2012 - Chris Wright
* License: GPL v2 or BSD (3-point)
*/

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

/* Array of database columns which should be read and sent back to DataTables. Use a space where
* you want to insert a non-database field (for example a counter or static image)
*/
$aColumns = array( 'TitleP', 'SlugP', 'CategoryIDP', 'OrderPage', 'idP' );

/* Indexed column (used for fast and accurate table cardinality) */
$sIndexColumn = "idP";

/* DB table to use */
$sTable = "cpage";

/* Database connection information */
$gaSql['user'] = "***";
$gaSql['password'] = "***";
$gaSql['db'] = "****";
$gaSql['server'] = "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
*/
[/code]

i seen some get the result modifying this page but there was no reall working example all over the forum

girishmr

In which column is you database id stored?
If I assume it to be say 7th (starting from 0), I would use, aData[7]. This would be your database id .
See my commented code in the above example, quoted below
[quote]// aData[0] will have the id value of the record[/quote]

Your code can be now
[code]
return 'edit';
[/code]

sades

Yes i understand that but when i place this code

[code]return 'edit';[/code]
it gives a javascript error

with the original one post here

[code]return 'edit'; [/code]
just returns a link like this: edit.php?id=aData[0]

what would be the correct code sorry that im such a noob on this im not skilled with js

girishmr

Sanity check
1. Check if aData[0] is having the value you want. Put an alert / console.log and see.
2. Also check whether the quotes are in proper place and escaped if needed

And I am sorry there should not be quotes around aData[0]. What you have got is correct.

[quote]
return 'edit';
[/quote]

sades

Hello girishmer thanks for so much patience, this is what i get

[quote]
Timestamp: 21/11/2012 02:56:18 p.m.
Error: ReferenceError: aData is not defined
Source File: http://localhost/site/test/test.php
Line: 260
[/quote]

the html java code on the page is right now this

[code]

$(document).ready(function() {
var oListax = $('#listax').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "./datatables.php",
"aoColumnDefs": [
{
"aTargets":[4],
"fnCreatedCell": function(nTd, sData, oData, iRow, iCol)
{
$(nTd).css('text-align', 'center');
},
"mData": null,
"mRender": function( data, type, full) { // You can use as well if you want
return 'edit';
}
}

]

} );

$("#listax td:nth-child(4)").live("click", function (e) {
e.preventDefault();
var nRow = $(this).parents('tr')[0];

var nTr = this.parentNode;
var aData = oListax.fnGetData( nTr );
// aData[0] will have the id value of the record

});
} );

[/code]

girishmr

[quote]
"fnCreatedCell": function(nTd, sData, oData, iRow, iCol)
[/quote]

You have defined oData and not aData. Hence the error. Use oData in place of aData.
Sorry I missed it too from your earlier snippets

sades

:( still didnt work with oData getting same error

[quote]
Timestamp: 21/11/2012 10:56:55 p.m.
Error: ReferenceError: oData is not defined
Source File: http://localhost/test/test/test.php
Line: 260

[/quote]

have code now like this

[code]

$(document).ready(function() {
var oListax = $('#listax').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "./datatables.php",
"aoColumnDefs": [
{
"aTargets":[4],
"fnCreatedCell": function(nTd, sData, oData, iRow, iCol)
{
$(nTd).css('text-align', 'center');
},
"mData": null,
"mRender": function( data, type, full) { // You can use as well if you want
return 'edit';
}
}

]

} );

$("#listax td:nth-child(4)").live("click", function (e) {
e.preventDefault();
var nRow = $(this).parents('tr')[0];

var nTr = this.parentNode;
var oData = oListax.fnGetData( nTr );
// oData[0] will have the id value of the record

});
} );

[/code]

girishmr

What value are you getting in 'data' variable? Can you check?

sades

the debugger just keeps loading and loading spent over 4 hours and shows no debug how can i check it?

girishmr

Use console.log and see if you can the value.
Are you not using firebug / dev tools from chrome to debug?

azraf

I was facing same problem. I followed this discussion and solved it.

Thank you guys for your effort.

Here is the final fix [edit only the mRender method]:

[code]
"mRender": function( data, type, full) { // You can use as well if you want
return 'edit';
}
[/code]