DataTables, jEditable, SharePoint 2007

denbrown

I am just now discovering DataTables ... what a wonderful tool. I need to know if there are any examples out there of using DataTables along with jEditable on a SharePoint 2007 list (actually my project will involve multiple lists). Unfortunately my organization will not be upgrading to 2010 or 2013 for another year or so, so I would request examples either be specifically for 2007 or have a universal SharePoint fit.

Specifically, I am interested in precisely how to use jEditable to update list fields. I DO NOT have direct access to the server, so client-side coding is the route I'll be taking. I do have the use of SharePoint Designer 2007 and I also have SPServices (thank you sympmarc) to utilize for list read/write access if that will do the job.

I am a novice to JSON, but if that is the prescribed method for jEditable updates I will most definitely delve into that and learn the basics.

Most of the examples I have seen look like they use PHP, I'm not sure if PHP can be used within the SharePoint framework, I personally haven't seen it used, but again, I am open to learning new things.

Lastly, I ran across a plug-in that looked promising but I cannot get it to work. If anyone has sucessfully utilized Justin Pate's jQuery.dataTables.TruncateCell.js plug-in and has a working example I would love to look at it and figure out what I did wrong. I don't know, maybe it's not SharePoint compatible.

denbrown

I never did get the jQuery.dataTables.TruncateCell.js plug-in working so I ended up with a workaround thanks to another forum discussion on this site. Here are the steps I took:

1. Set up varaible for length of cell text in characters

-- This is a global variable in my application

[code]var myTxt = 65; // Text width (in # of characters) for specific columns [/code]

2. Created ellipsis function from this discussion (http://datatables.net/forums/discussion/30/modifying-cell-content-before-showing/p1)

-- This function is called by functions applyJeditableEllipsis() & applyEllipsis() discussed below

[code]function ellipsis(text, n) {
if(text.length > n)
return text.substring(0,n)+"...";
else
return text;
}[/code]

3. Created function that applies the ellipsis to the cell's text, this function is called as the dataTable is being created during the "fnRowCallback" function

[code]function applyEllipsis(nrow,col,txtlen){
var $cell = $('td:eq('+col+')', nrow);
$cell.text(ellipsis($cell.text(),txtlen)); // ellipsis() from 2. above
return nrow;
}[/code]

-- Example call in fnRowCallBack:

[code]oTable = $("#dataTable" + TabId).dataTable({
"sPaginationType": "full_numbers",
"iDisplayLength": -1,
"aLengthMenu": [[15, 20, 25, 50, 100, -1], [15, 20, 25, 50, 100, "All"]],
"bPaginate": true,
"bLengthChange": true,
"bFilter": true,
"bSort": true,
"bInfo": true,
"bAutoWidth": true,
"bDestroy": true,
"aoColumnDefs": [
{ "sType": "formatted-num-blank-last", "aTargets": [4] },
{ "sType": "date-blank-last", "aTargets": [5] },
{ "sType": "blank-last", "aTargets":[6, 7, 8, 9] }
],
"fnRowCallback": function(nRow, aData, iDisplayIndex, iDisplayIndexFull){
// *** NOTE *** applyEllipsis(nrow,col,txtlen) col is 0-based,
// however, don't include hidden columns in count
applyEllipsis(nRow,8,myTxt);// using variable from 1. above
// In my app this was actually column 9 (10th col) but
// because column 0 was hidden "8" is used
}
});[/code]


4. Created function to apply jEditable to specific column also using the concept found in this discussion (http://datatables.net/forums/discussion/30/modifying-cell-content-before-showing/p1).

-- This function truncates cell text using length of cell text variable (1. above) and stores the original text as a tooltip.
-- Additionally, it causes jEditable to get the orginal text when clicked
-- It also removes any HTML tags from the text

[code]function applyJeditableEllipsis( col, txtlen ){
// Apply the jEditable handlers for cells with ellipsis
// (gets title instead of cell content)
oTable.$('' + col + '').not('.exclude').editable( function( sValue ) {
var aPos = oTable.fnGetPosition( this );
var aData = oTable.fnGetData( aPos[0] );
aData[ aPos[1] ] = sValue;
return ellipsis(sValue,txtlen); // ellipsis() function from 2. above
}, { data: function(value, settings) {
var aPos = oTable.fnGetPosition( this );
var aData = oTable.fnGetData( aPos[0] );
return aData[aPos[2]].replace(/(<([^>]+)>)/ig,""); // removes HTML tags
},
"tooltip": function(value, settings) {
var aPos = oTable.fnGetPosition( this );
var aData = oTable.fnGetData( aPos[0] );
if( aData[aPos[2]] != null && aData[aPos[2]] != undefined ){
if( aData[aPos[2]].replace(/(<([^>]+)>)/ig,"").length > txtlen ) {
return aData[aPos[2]].replace(/(<([^>]+)>)/ig,"");
// removes HTML tags
}
}
else {
return;
}
},
"submitdata": function ( value, settings ) {
return {
"row_id": this.parentNode.getAttribute('id'),
"column": oTable.fnGetPosition( this )[2]
};
},
"height": "18px",
"width": "100%",
"placeholder" : ""
});
}[/code]

-- The function is called after oTable is initially created (oTable has to already exist)
-- Use the following call:

[code]applyJeditableEllipsis("td:eq(9)",myTxt); // using variable from 1. above[/code]
** Note that the specific column is passed to the function along with the variable that sets up the cell text length, this column number IS 0-based and does NOT skip hidden fields (unlike fnRowCallback applyEllipsis() in 3. above).

It appears to be working so far, now on to tackling my other issues!