User selectable rows (multiple rows) with Server side processing
User selectable rows (multiple rows) with Server side processing
I want a table with server side processing but with User selectable rows (multiple rows) features.
With server side table when change current page and when come back, the first selection disappear.
Thanks!
[code]
oTable = $("#example").dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "../examples_support/server_processing_post.php",
"fnServerData": function ( sSource, aoData, fnCallback ) {
$.ajax( {
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": fnCallback
} );
},
"fnDrawCallback": function ( oSettings ) {
$('#example tbody tr').each( function () {
$(this).click( function () {
if ( $(this).hasClass('row_selected') ) {
$(this).removeClass('row_selected');
}
else {
$(this).addClass('row_selected');
var iPos = oTable.fnGetPosition( this );
var aData = oTable.fnGetData( iPos );
var iId = aData[0];
}
} );
} );
}
} );
[/code/
With server side table when change current page and when come back, the first selection disappear.
Thanks!
[code]
oTable = $("#example").dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "../examples_support/server_processing_post.php",
"fnServerData": function ( sSource, aoData, fnCallback ) {
$.ajax( {
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": fnCallback
} );
},
"fnDrawCallback": function ( oSettings ) {
$('#example tbody tr').each( function () {
$(this).click( function () {
if ( $(this).hasClass('row_selected') ) {
$(this).removeClass('row_selected');
}
else {
$(this).addClass('row_selected');
var iPos = oTable.fnGetPosition( this );
var aData = oTable.fnGetData( iPos );
var iId = aData[0];
}
} );
} );
}
} );
[/code/
This discussion has been closed.
Replies
Therefore, in order to do user selectable rows with server-side processing, you'll need to use a different method. The obvious one that springs to mind is having a column with a unique ID, and you can maintain an array of the row IDs which have been selected.
Hope this helps,
Allan
Yes, at this solution i am thinking. Respectively,to put in the table an ID hidden column and save in an array each row selected. But I don't know how to make to select a row (and how select all rows from current page).
I am a novice into Object-oriented programming and JQuery. Maybe you show me an example cod.
Thanks,
iuliandum
Selecting a row would be very similar to me demo code, where an event handler is applied to the TR elements and will act as the 'select', adding (or removing) an entry from the array containing the selected IDs.
I don't really do example code for this kind of thing, as I believe it's much more instructive for one to learn by working through it :-). Between the ideas in this thread and my demo code, there is quite a bit to be getting on with!
Regards,
Allan
Working!
This is code:
Allan, please input this table in the "Server-side processing" example with the name "User selectable rows (multiple rows) ". Maybe another user like to use.
Thank you and Congratulations! You are a genius!
[code]
var oTable;
var selected = new Array();
$(document).ready(function() {
$('#form').submit( function() {
alert (selected);
return false;
} );
/* Init the table */
oTable = $("#example").dataTable({
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "../examples_support/server_processing_post.php",
"fnServerData": function ( sSource, aoData, fnCallback ) {
$.ajax( {
"dataType": 'json',
"type": "POST",
"url": sSource,
"data": aoData,
"success": fnCallback
} );
},
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
$('#example tbody tr').each( function () {
if (jQuery.inArray(aData[0], selected)!=-1) {
$(this).addClass('row_selected');
}
});
return nRow;
},
"fnDrawCallback": function ( oSettings ) {
$('#example tbody tr').each( function () {
var iPos = oTable.fnGetPosition( this );
if (iPos!=null) {
var aData = oTable.fnGetData( iPos );
if (jQuery.inArray(aData[0], selected)!=-1)
$(this).addClass('row_selected');
}
$(this).click( function () {
var iPos = oTable.fnGetPosition( this );
var aData = oTable.fnGetData( iPos );
var iId = aData[0];
is_in_array = jQuery.inArray(iId, selected);
if (is_in_array==-1) {
selected[selected.length]=iId;
}
else {
selected = jQuery.grep(selected, function(value) {
return value != iId;
});
}
if ( $(this).hasClass('row_selected') ) {
$(this).removeClass('row_selected');
}
else {
$(this).addClass('row_selected');
}
});
});
}
});
} );
[/code]
Nice one! That is outstanding, and thanks for sharing it with us :-)
I have indeed posted this as an example on the site: http://datatables.net/examples/server_side/select_rows.html as I'm sure this will provide most useful for people - not only for this specific case, but how state can be retained over DataTables operations with server-side processing. I have made one or two slight changes to your code to simplify here and there, and to keep it in the same style as the other demo code (simply for consistency).
Excellent stuff.
Regards,
Allan
I ask you if it fast working to use this code.
[code]
"fnRowCallback": function( nRow, aData, iDisplayIndex ) {
var iPos = oTable.fnGetPosition( nRow );
if ( jQuery.inArray(aData[0], gaiSelected) != -1 )
{
$(nRow).addClass('row_selected');
}
if ( iPos != null )
{
var aData = oTable.fnGetData( iPos );
if ( jQuery.inArray(aData[0], gaiSelected) != -1 )
{
$(this).addClass('row_selected');
}
}
$(nRow).click( function () {
var iPos = oTable.fnGetPosition( nRow );
var aData = oTable.fnGetData( iPos );
var iId = aData[0];
if ( jQuery.inArray(iId, gaiSelected) == -1 )
{
gaiSelected[gaiSelected.length++] = iId;
}
else
{
gaiSelected = jQuery.grep(gaiSelected, function(value) {
return value != iId;
} );
}
$(nRow).toggleClass('row_selected');
});
return nRow;
}
[/code]
Sorry, I'm not quite sure I understand. Are you asking if this code is more optimised? It looks fine to me on a quick scan, but the best way to tell is to load it up using Firebug and enable profiling. Do it a number of times and take an average.
Regards,
Allan
I'm trying to follow on this example, I'm trying to send the Ids of the selected rows to the server and then remove those rows on the client side.
[code]
$('#process').click( function() {
if(gaiSelected == ''){
alert ("Please select at least one row ");
return false;
}
else{
$.getJSON('/products/iprocess?id='+gaiSelected+'&ajax=true');
return false;
}
} );[/code]
this part seems to work, I'm not sure it's the best way, but I can get the data on the server, but I tried to remove the selected rows like this, but it didn't work:
[code]
var anSelected = fnGetSelected( oTable );
for (var i=0 ; i
Yes indeed - I suspect it's because you are using server-side processing. The interaction API functions (add row / delete row etc) that are built into DataTables aren't designed to work with server-side processing since the work ont he client-side only. What you need to do is send a request to the server to delete the row and then re-draw the table once it has been removed from the database (so it doesn't show up again).
What I am guessing is happening at the moment is that DataTables deletes the row as required on the client-side, but issues a draw update request to the server, which doesn't know that the row has been deleted, so the re-draw shows the row again!
Regards,
Allan
Thanks for your note. You are quite correct - live event handling in jQuery is perfect for this kind of scenario. The example was written for jQuery 1.2 which was before the live events were introduced in 1.3. I'll update the example at some point soon to use live events, which should result in a much cleaner execution of the example.
Regards,
Allan
Is there a way to make the Table Tools "Select All" button work with this feature? I have tried to make a button to do it but without success. I think it must involve the code below but I don't know how to finish it off?
[code]
"sRowSelect": "multi",
"aButtons": [
{
"sExtends": "select_all",
"fnClick": function ( nButton, oConfig, oFlash ) {
//alert( 'Mouse click' );
// select all
var oTT = TableTools.fnGetInstance( 'propertyList' );
oTT.fnSelectAll();
/* add or remove values from: */ gaiSelected
toggleClass('row_selected'); // for all visible rows.
[/code]
-S
Allan
I wonder if selectable rows will work with rows that are set to reload as described here:
http://datatables.net/forums/discussion/5886/trying-to-reload-data-at-setinterval-but-failing-miserably/p1
I implemented the final bit of code he has at the end, and it works PERFECTLY, but I noticed when I select some of the text on the rows (as if I'm going to copy it ), the selection disappears during the refresh. Makes me wonder if selecting and deleting rows is even possible with the refresh code, because I wonder if a selection will even hold after a refresh.
That is because when a refresh occurs, the DOM elements in the table (when using server-side processing) are destroyed, and new ones created. Hence the text you had selected before no longer exists! Row select gets around this by caching information about which rows are selected and then reselecting them on the redraw.
In theory it might be possible to get the current text selection and then try to select it and after a redraw, but I don't know if browsers allow that capability. The other option might be to not do the data refresh if some text is selected.
Allan
Thank you,
-S
I implemented example http://datatables.net/release-datatables/examples/server_side/select_rows.html and it works great. But I’m in need of Select/Deselect All and I’m lost. I also implemented TableTool example that already has Select/Deselect All nicely build in and it is even greater, but it does not support server-side, so I can only deal with one page at the time. The big question is how to combine the two examples if possible, and if not then how to implement select all for the first example.
I created a mockup of what I’m talking about http://portal.iasclaims.com/testing/admin/test3.php
It has both examples there already with server side working, if someone could point me in the right direction that would be great.
Your posts help me very much, however I want to control the parameters to submit to server. When I change to GET method, it shows only a meaningless parameter named: delete?example_length=10
Thanks a lot for your help.
I have had a look at the example on:
http://datatables.net/release-datatables/examples/server_side/select_rows.html
as the rows are selected the id's are strung together and the separator is a comma but is there an easy way to change the separator I would like to use | as I am going to use text as the id instead of a number?
Thanks