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:
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
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:
{% block content %}
{% javascripts '@KomdevAdminBundle/Resources/public/js/datatable/jquery.dataTables.min.js' %}
<script type="text/javascript" src="{{ asset_url }}"></script>
<script type="text/javascript">
$(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 '<a id="show" href="' + "{{ path('komdev_admin_users_show', {'id': 'REPLACE'}) }}" + '">Show</a> / <a id="del" href="' + "{{ path('komdev_admin_users_delete', {'id': 'REPLACE'}) }}" + '">Delete</a>';//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) );
} );
} );
</script>
{% endjavascripts %}
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