ISSUE: Drag and drop / sortable on filtered or multipage results

fusionzone

I was wondering if there was a way to dynamically disable the sortable (drag&drop) feature and display an alert message if the user has entered data into the search field or if they have more than 1 page of results.

The initial display is ALL RECORDS with NO SEARCH and drag and drop works great. However, if you filter the data or limit the number of results and create a multi-page scenario, you then have a problem with the sorting when it updates the database. It will update the database with the row positions in relation to the shown records instead of in relation to all the records.

So I would just like to say something to the affect of "Sorting not available" if you are filtering or limiting results to less than all records.

Below is my code which includes the integration of COLDFUSION CFC REMOTING, TABLETOOLS, DRAG AND DROP / SORTABLE incase anyone wants some sample code, also shows how to redraw the table after clicking a delete icon on the table row,

[code]
var oTable;
var giRedraw = false;
$(document).ready(function(){
$("#fzGrid tbody a.fDelete").live('click', function(e) {
e.preventDefault(); // STOP LINK FOLLOW
var tr = $(this).closest("tr").get(0);
var url = $(this).attr("href")
var rowData = oTable.fnGetData(tr);
var id = rowData[3]; // SPECIFY THE COLUMN OF ID
deleteFunc(id);
});
var oTable = $('#fzGrid').dataTable({
"bJQueryUI": true,
"bAutoWidth": false,
"aLengthMenu": [[5, 10, 25, 50, 100, -1], [5, 10, 25, 50, 100, "All"]],
"sPaginationType": "full_numbers",
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "cfc/yourCFC.cfc?method=yourMETHOD",
"iDisplayStart": 0,
"oLanguage": {
"sUrl": "dt_en.txt"
},
// SPECIFY COLUMN DEFINITIONS
"aoColumnDefs": [
{ "sWidth": "0%", "aTargets": [3]},
{ "sWidth": "5%", "aTargets": [0,2] },
{ "sClass": "center", "aTargets": [0,2] },
//{ "sClass": "dragcell", "aTargets": [0] },
{ "sClass": "move", "aTargets": [0,1] },
{ "bVisible":false, "aTargets": [3]},
{ "bSearchable":false, "aTargets": [0,2,3]},
{ "bSortable": false, "aTargets": [0,1,2,3] }
],
"sDom": 'T<"clear"><"H"lfr>t<"F"ip>',
"sSwfPath": "copy_cvs_xls_pdf.swf",
"oTableTools": {
"aButtons": [
<!---
/**** DROP DOWN MENU STYLE***
{
"sExtends": "collection",
"sButtonText": "Save",
"aButtons": [ "csv", "xls", "pdf" ]
},*/
--->
{
"sExtends": "copy",
"sButtonText": "Copy",
"mColumns": [ 1 ] // OUTPUT COLUMN
},
{
"sExtends": "csv",
"sButtonText": "CSV",
"mColumns": [ 1 ] // OUTPUT COLUMN
},
{
"sExtends": "xls",
"sButtonText": "Excel",
"mColumns": [ 1 ] // OUTPUT COLUMN
},
{
"sExtends": "pdf",
"sButtonText": "PDF",
"sTitle": "Metatags", // PDF TITLE
"mColumns": [ 1 ] // OUTPUT COLUMN
},
{
"sExtends": "print",
"sButtonText": "Print",
"mColumns": [1], // OUTPUT COLUMN
"fnClick": function (nButton, oConfig, oFlash) {
oTable.fnSetColumnVis(2, false); // HIDE TOOLBAR COLUMN FROM PRINT
$('div.dataTables_scrollHead').show();
$(window).keyup(function(){
oTable.fnSetColumnVis(2, true); // DISPLAY TOOLBAR ON RETURN
});
}

}
]
}
});

$(function() {
$("#fzGrid tbody").sortable({ opacity: 0.6, cursor: 'move', update: function() {
var szUUIDList = "X";
$('#fzGrid input[name=theid]').each(function(i){
szUUIDList = szUUIDList + ',' + $(this).val();
});

$.ajax({
type: "GET",
url: "cfc/yourCFC.cfc?method=yourMETHOD",
data: "id=" + szUUIDList,
//contentType: "application/json; charset=utf-8",
//dataType: "html",
success: function(msg){
var msg = jQuery.trim(msg);
if(msg == '"OK"'){
oTable.fnDraw(false);
}
else
{
alert('There was an error processing your request.');
}
}
});

}
});
});

function deleteFunc (item) {
// Show a confirm popup to to be sure that we want to delete that record
var r=confirm('Are you sure you want to delete?');
if (r==true){
$.ajax({
type: "GET",
url: "cfc/yourCFC.cfc?method=yourMETHOD",
data: "id="+item,
success: function(msg){
var msg = jQuery.trim(msg);
if(msg == '"OK"'){
oTable.fnDraw(false);
}
else
{
alert('There was an error processing your request.');
}
}
});
}
}
});

[/code]

fusionzone

I added 2 functions to control the sortable, however is there a way to call these function when someone enters data into the search filter or if there are more than 1 page of results?

[code]
function removeSort(){
$( "#fzGrid tbody" ).sortable( "option", "disabled", true );
}
function enableSort(){
$( "#fzGrid tbody" ).sortable( "option", "disabled", false );
}
[/code]

xtremer360

This is a good question. If you have a solution could you send me a message.