Datatables with twig

yeipis

Hi everyone,

I have a symfony2 project with twig as template engine. I'm developing my CRUD pages with datatables 1.9.x. I'm using it to display all records and in every row I'm adding non-database columns to insert edit and delete links. So far, so good. The problem is when I'm using the path() method to create an edit/delete link I need to give the id, but twig is Server-side and DT is client-side. My workarround was the following:


[code]
{% block content %}
{% javascripts '@KomdevAdminBundle/Resources/public/js/datatable/jquery.dataTables.min.js' %}


$(document).ready(function() {
var oTable = $('#usersTable').dataTable({
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": 'ajax/fetch_users',
"iDisplayLength": 10,
"aoColumns": [
{ "mData": 0, "sWidth": "5%"},
{ "mData": 3 },
{ "mData": 2 },
{ "mData": 1 },
{ "bSortable": false, "fnRender": function(parent) { //HERE IS THE NON-DATABASE COLUMN
return 'Show / Delete';//I PUTTING THE 'REPLACE' STRING TO MARK WHERE I MUST REPLACE THE ID WHEN I'M RENDERING THE DT
}},
]
});

$('#usersTable').on('click', 'tr', function(e) {
e.preventDefault();
var id = oTable.fnGetData(this)[0];
var data = oTable.fnGetData(this)[4];
data = data.replace(/REPLACE/g, id);//HERE I REPLACE ALL 'REPLACE' STRING OCURRENCES. AT THIS POINT EVERYTHING IS WORKING FINE
alert(data)
alert(oTable.fnGetData(this)[4]);
//I NEED TO INSERT data VAR WITH THE REPLACED VALUES ON COLUMN 4 AND I DON'T KNOW HOW TO DO IT!!
});

$("input").keyup( function () {
/* Filter on the column (the index) of this element */
oTable.fnFilter( this.value, $("input").index(this) );
} );
} );


{% endjavascripts %}
[/code]


I you was patient enough to see this code, you will see that I'm failing at insert the replaced html in the column 4 in every row.

Someone could help me?
Thanks in advance.
Yeipis

allan

Can you not pass the id back in your JSON and use it in the mRender function?

Allan

yeipis

Thanks Allan for your response.

I don't think I can, because if I use the path() function (function that renders a valid path in a sf2 app) it will look like this:

[code]
$(document).ready(function() {
var oTable = $('#usersTable').dataTable({
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": 'ajax/fetch_users',
"iDisplayLength": 10,
"aoColumns": [
{ "mData": 0, "sWidth": "5%"},
{ "mData": 3 },
{ "mData": 2 },
{ "mData": 1 },
{ "bSortable": false, "fnRender": function(parent) { //HERE IS THE NON-DATABASE COLUMN
return 'Show / Delete';
}},
]
});
[/code]

So, as you can see I only modify the 'REPLACE' string with a id var. This id var is given by the actual DT row (javascript, client side) and the sentence between {{ }} is server side (twig), so I can't pass any values (at least in a simple way). That's why I'm just putting some known value (like REPLACE) in order to replace it later with the respective id (when the table is loaded and/or table changes the actual page).

I was able to resolve part of my problem, I just modify my code like this and I could replace 'REPLACE' String with the corresponding id:

[code]

$('#usersTable').on('click', 'tr', function(e) {
e.preventDefault();
//alert(this);
//this =
var id = oTable.fnGetData(this)[0];
//var data = oTable.fnGetData(this)[4];
var data = $(this).html();
data = data.replace(/REPLACE/g, id);
//alert(data);
//alert(oTable.fnGetData(this)[4]);
$(this).html(data);
});

[/code]

Now I want to do this text replacement ( line $(this).html(data) and above) when the table is loaded and/or the page is changed.

Is any DT specific listener to do this or should I manage this directly with jquery?

Tanks again.
Yeipis

yeipis

Hi everybody,

I solved in a pretty nasty way, If any of you shows up with a better solution, I will be thankful.

Just posting:

[code]
$('#usersTable').on('click', 'tbody tr', function(e) {
e.preventDefault();
var id = oTable.fnGetData(this)[0];
var data = $(this).html();
data = data.replace(/REPLACE/g, id);
$(this).html(data);
e.toElement.href = e.toElement.href.replace(/REPLACE/g, id);
window.location = e.toElement.href;
});
[/code]

allan

I'm still not really understanding I'm afraid. Why is the `id` not in the table like the rest of the data? And if it is in the column there, can you not just do:

[code]
mRender: function ( data, type, row ) {
return '...';
}
[/code]

Can you link us to the page?

Allan

yeipis

Allan,

I can't use in such way because I need to use the path() function. This function constructs a valid path to a symfony app. It also aims the path to the corresponding environment (dev, test, prod, etc). Given this, the problem is summarized to a scripting one:
[code]
mRender: function ( data, type, row ) {
return '...';
}
[/code]

The sentence between {{ }} is interpreted by twig and idVar is a variable expected at twig execution time. I can't pass a js variable to this sentence, they are in different scopes (client and server).

Another solution that I saw arround is to solve this mess at server side. But I don´t like this idea pretty much because this solution implies to render some html at server side (old fashion way). I rather prefer to keep it at client side (for more messy it can be).

regards.
Yeipis

allan

I think inherently this is a server-side issue, since it is Twig's output that is the issue here. It can only be solve in Javascript if all of the information required to solve it (i.e. the path resolution) is in the outputted data, which it sounds like it isn't.

Why can't the resolved path just be put into the JSON output - in much the same way that I didn't understand why the ID couldn't be put into the output?

Allan

koakh

At last

I lost hours to do this server side and client side fix with symfony2 twig
and find a way that works for me, I hope it works for others mates

I use this way

[code]
$(document).ready(function() {

//GET SERVERSIDE {{ path }} target url to use in client side, in every row
var tmp;
tmp = "{{ path('post_show', {'id':'0'})}}";
var url_post_show = tmp.substring(0, tmp.length-1);

/* Table initialisation */
$('#dt_postlist').dataTable({
"sDom": "<'row'<'span6'l><'span6'f>r>t<'row'<'span6'i><'span6'p>>",
"sPaginationType": "bootstrap",
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "{{ path('ajax_postlist') }}",
"oLanguage": {
"sLengthMenu": "_MENU_ records per page"
},
"aoColumnDefs": [{
"bSortable": false,
"aTargets": [ -1 ],/* -1 last column */
"mData": 0, /* get data from column. ex 0 */
"bSortable": false,
"mRender": function ( data, type, row ) {
return 'Show';
}
}]
});

});
[/code]
I use 1 column with 3 buttons, Show, Edit and Delete (FORM) with BootBox and its working 100%
in this sample I only put EDIT to keep it simple

Thanks to all for the help in this post..... :)
This datatable in serverside is really awsome I m working with 10000 records and super speed even in mobile phones, filters and orders :)

Koakh