server side use, nothing append on filter/search/order/next-prev, etc...

madmike

Hi,

I have a problem on server side use. The data are well loaded on content's display, but after, when i'm using input filters, search, etc... It's like ther is no server side call again. On firebug, I can't see XHR, is just call @ load only, nothing more on any action like next / prev or search.

I certainly have a mistake in the jquery call, but can't find where.

This is my code (warning php inside too):

[code]
var oTable = $('.dynamicTable').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "stdout_json.php?r=<?php echo($table_name); ?>",
"sPaginationType": "full_numbers",
"bJQueryUI": false,
"bAutoWidth": false,
"bLengthChange": false,
"aLengthMenu": [[25, 50, 100, -1], [25, 50, 100, "All"]],
"oLanguage": {
"sSearch": "Search all columns:",
"sLengthMenu": "_MENU_ records"
},
"bSortClasses": false,
"sDom": "<'row-fluid'<'span6'Tl><'span6'f>r>t<'row-fluid'<'span6'i><'span6'p>>",
<?php echo $_SESSION["aoColumnDefs"]."\r\n"; ?>
"bPaginate": true,
"sPaginationType": "full_numbers",
"iDisplayLength": 10,
"bLengthChange": true,
"bInfo": true,
"bStateSave": true,
"oTableTools": {
"sSwfPath": "swf/copy_csv_xls_pdf.swf",
"sRowSelect": "single",
"aButtons": [
{
"sExtends": "select",
"sButtonText": "Edit selected",
"bSelectedOnly": "true",
"mColumns": [0]
},
{
"sExtends": "text",
"sButtonText": \'Create\',
"sToolTip": "Create a new product",
},
{
"sExtends": "text",
"sButtonText": \'Delete\',
"sToolTip": "Delete product",
},
{
"sExtends": "collection",
"sButtonText": 'Export ',
"aButtons": [
"print",
{
"sExtends": "csv",
"sButtonText": "CSV all columns",
"sToolTip": "Save displayed table and all columns as CSV",
"bShowAll": true,
"mColumns": "all"
},
{
"sExtends": "csv",
"sButtonText": "CSV visible columns",
"sToolTip": "Save displayed table and visible columns as CSV",
"mColumns": "visible"
},
{
"sExtends": "pdf",
"sButtonText": "PDF All columns",
"mColumns": "all",
"sPdfOrientation": "landscape",
"sPdfMessage": "<?php echo date('l jS \of F Y h:i:s A'); ?>"
},
{
"sExtends": "pdf",
"sButtonText": "PDF Visible columns",
"mColumns": "visible",
"sPdfOrientation": "landscape",
"sPdfMessage": "<?php echo date('l jS \of F Y h:i:s A'); ?>"
}
]
}
]
},
"fnInitComplete": function() {
var oSettings = $('.dynamicTable').dataTable().fnSettings();
for ( var i=0 ; i0){
$(".dynamicTable tfoot input")[i].value = oSettings.aoPreSearchCols[i].sSearch;
$(".dynamicTable tfoot input")[i].className = "";
}
}
},
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
var id = aData[0];
$(nRow).attr("id",id);
return nRow;
},
"fnDrawCallback": function () {
/* Apply the jEditable handlers to the table */
/* ... removed dur to loooong message .....*/
}
});


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


$(".dynamicTable tfoot th input").each( function (i) {
asInitVals[i] = this.value;
} );

$(".dynamicTable tfoot th input").focus( function () {
if ( this.className == "search_init" )
{
this.className = "";
this.value = "";
}
} );

$(".dynamicTable tfoot th input").blur( function (i) {
if ( this.value == "" )
{
this.className = "search_init";
this.value = asInitVals[$("tfoot input").index(this)];
}
} );

$('.dynamicTable td').live('click',function(){
var aPos = pTable.fnGetPosition(this);
var aData = pTable.fnGetData(aPos[0]);
alert(aData);
});

$.extend( $.fn.dataTableExt.oStdClasses, {
"sWrapper": "dataTables_wrapper form-inline"
} );

[/code]

allan

Please link to a a page showing the problem: http://datatables.net/forums/discussion/12899/post-test-cases-when-asking-for-help-please-read

Allan

allan

Thanks for picking up the DataTables support option. If there is no XHR being sent out from the above code, I'd suggest that either there is a Javascript error on the page, or there are no matching elements for `$('.dynamicTable')` . Is it possible to link to the page you are working on so I can determine the exact problem?

If you don't want to make the page public, you can PM me by clicking here: http://datatables.net/forums/messages/add/allan .

Regards,
Allan

madmike

I PM ;-) thanks I get an editable error who seem block post.

allan

Thank you for the PM - it looks to me that the error is related to jEditable - when I look at the console I see:

> TypeError: 'undefined' is not an object (evaluating '$.editable.types[settings.type].plugin')

The types you have available are: `charcounter` , `select` , `text` and `textarea` (in $.editable.types) so I guess you are trying to use a type which isn't available in jEditable? I should note that jEditable isn't part of DataTables, so I might only be able to offer limited support for it, as I'm not completely familiar with its code base.

Also, when I try to load your page in Chrome, nothing works since the page you linked me to is https, but it is trying to load control from http:// which Chrome is blocking as insecure.

Regards,
Allan

madmike

I remove the editab code for the test and all look ok (ajax call work well). I will try to find where this type is set.

About the http call, is it an ajax setting to force http call ?

Thanks

allan

> About the http call, is it an ajax setting to force http call ?

Nothing to do with Ajax the Chrome issue I was seeing. You page is being served up from https:// (at least the link you give me is), but you are included unsecured content:

[code]

[/code]

Chrome doesn't like that is is blocking the script since it is not on a secured connection, while the host page is.

You can solve this by using:

[code]

[/code]

The `//` tells the browser to load using the host page's protocol.

There are a few other includes that are on the page which will also need this treatment. If you look at the console pane in Chrome's developer tools you'll see the warnings about the blocked content.

Regards,
Allan

madmike

I currently made a couple of modification for https, and load performance, thanks for the trick.
I'm searching more about the "editable" issue. I don't found where set the types.

madmike

About the buttons, There is an example using selected row + select button for opening an ajax fill dialog ?

allan

> I don't found where set the types.

Where do you initialise jEditable? The type should be defined in there.

> About the buttons, There is an example using selected row + select button for opening an ajax fill dialog ?

There isn't, but you would just bind an Ajax event to happen on the click:

[code]
$('tbody td img').click( function () {
var data = table.fnGetData( $(this).parents('tr')[0] );

$.ajax( {
url: '/getData?id='+data[0],
dataType: 'json',
success: function ( json ) {
// Show dialogue based on JSON
}
} );
[/code]

Obviously there are some gaps you'd need to fill in there (for example are you using an image?), actually calling the dialogue to show (depends what dialogue library you are using), formatting the data (depends on the data) etc, but that's the basic idea.

Regards,
Allan

madmike

Thanks, I found the editable issue, on calendar types (custom). I've certainly forgot a file, but never mind, I don't need this type right now. About the button I'm currently testing bootstrap, and try to open a modal with remote content. I hope found a solution quickly ;-) .

What do you think about something like this ?
[code]
{
"sExtends": "text",
"sButtonText": \'Upload CSV\',
"sToolTip": "Click to upload a CSV file",
}
[/code]

I'll keep you in touch.

allan

The problem with using an `a` tag in sButtonText is that the button is already an `a` tag, so it will be nesting two `a` tags. Ideally I think you could use fnClick:

[code]
{
"sExtends": "text",
"sButtonText": 'Upload CSV',
"sToolTip": "Click to upload a CSV file",
"fnClick": function ( button, config ) {
$('#myModal').modal('show')
}
}
[/code]

I think that will serve you better.

Regards,
Allan

madmike

In fact I have choose finaly use jQuery UI modal instead Bootstrap. It seem easier ;-) . But I always get a problem on datatable column filters. Can you check it please ?

allan

Have you implemented column filtering in your stdout_json.php file? With server-side processing, filtering, sorting and paging are all performed at the server-side, so whatever script it is that you are using there needs to be able to perform the functions needed. DataTables will send the parameters `sSearch_{column-index}` with each request so the server can do this.

Allan

madmike

Yep hopefully, but in fact, first I have a focus problem. When I click the label stay display in the input fiels, and after when i delect content and change it, I can't see call to stdout_json.php .

allan

I'd suggest, rather than using default text in the field, in combination with the `search_init` class, use the HTML5 `placeholder` attribute. Simply:

[code]

[/code]

for example. This is much easier, as it means that you don't need to manipulate the value using Javascript - the browser does it all for you. It is also well supported by all current browser releases: http://caniuse.com/#search=placeholder

Allan

madmike

placeholder is IE 10 only, and I have lots of IE8/IE9 users. And it's hard to explain them to change browser to acces to our website. But I found my problem, I have 2 classes in the class.

[code][/code]

If i remove the "text" and just use a "search_init" it's ok, but I don"t see wich script add the "text" in the class. By default I only build the html with the "search_init" class only.

madmike

If I'm using that, how I can pass a href for push content to my modal ?

[quote]allan said: [code] {
"sExtends": "text",
"sButtonText": 'Upload CSV',
"sToolTip": "Click to upload a CSV file",
"fnClick": function ( button, config ) {
$('#myModal').modal('show')
}
}[/code][/quote]

allan

> If I'm using that, how I can pass a href for push content to my modal ?

Use the `remote` option: http://twitter.github.com/bootstrap/javascript.html#modals .

[code]
$('#myModal').modal({
remote: {url}
});
[/code]

> If i remove the "text" and just use a "search_init" it's ok, but I don"t see wich script add the "text" in the class.

Nothing that I see in the Javascript on the page. Possibly one of the libraries. However the 'fix' is relatively simple - change

> if ( this.className == "search_init" )

to

[code]
if ( $(this).hasClass( 'search_init' ) )
[/code]

and

> this.className = "search_init";

to

[code]
$(this).addClass( "search_init" );
[/code]

Allan

madmike

Thanks Allan, I've tested this, it's better but I have s stange effect : filters dynamically change name :-) . Any idea ?

allan

Hi,

The problem is that one of the columns is hidden ( `"bVisible": false` ) which knocked the `index()` method out of 'alignment' - i.e. the index() method is calculating the visible index, but DataTables expects the column index.

This can be resolved by using the fnVisibleToColumnIndex plug-in ( http://datatables.net/plug-ins/api#fnVisibleToColumnIndex ). Simply include the code for that plug-in in your page (after you include the DataTables file, but before you initialise the DataTable) and change:

> oTable.fnFilter( this.value, $("tfoot input").index(this) );

to
[code]
oTable.fnFilter( this.value, oTable.fnVisibleToColumnIndex( $("tfoot input").index(this) ) );
[/code]

and
> this.value = asInitVals[$("tfoot input").index(this)];

to
[code]
this.value = asInitVals[ oTable.fnVisibleToColumnIndex( $("tfoot input").index(this) ) ];
[/code]

And that should do it. It should also make the filtering work correct, since it if off set by one at the moment!

Regards,
Allan

madmike

Allan,

So many, many, many, thanks for you amazing tool and your so useful help. It work perfect now !
Thanks a lot, for all your patience and shared knowledge.

Mike