TableTools

sunnyside

Hi. I am using Datatables and think its an awesome piece of work. Well done!. I am having a problem on my side. Trying to use the TableTools plugin, but I cannot seem to get it right. The icons just don't show up. I put in the TableTools.js and ZeroClipboard.js along with the css required. I initialise it as in the example i.e. "sDom": '<"top"i>rt<"bottom"flp><"clear"&lgt;'. But still nothing showing...No errors in IE or ff. Please HELP!

sunnyside

Apologies. i pasted the wrong code in question above. I am using "sDom": 'T<"clear">lfrtip'.

allan

Can you post a link to your page please?

Allan

sunnyside

sorry, its running on my machine. here is the init code....

$("#orderItemTable").dataTable({ "sDom": 'T<"clear">lfrtip',"bFilter": true,bJQueryUI: true,sPagination: "full_numbers","bProcessing": true,"bSort": true,
"aoColumns":[

{},//Product
{},//Description
{},//Order No
{},//Order Date
{},//Supplier
{},//Order Qty
{},//Unit Price
{}, //Initial Ship Date
{},//Revised Ship Date
{},//File No
{},//Qty Shipped
{},//ETA
{},//Received
{},//Date Received
{},//Department
{},//Season
{},//Year
{},//Trip
{}, //Brand
{},//Category
{},//Item Code
{},//Group
{},//Fabric
{},//Comments
{}//image

]}).columnFilter().makeEditable({ sUpdateURL: "UpdateOrdersReceivedData.htm",

"aoColumns": [
null,//Product
null,//Description
null,//Order No
null,//Order Date
null,//Supplier
null,//Order Qty
null,//Unit Price
{
//Initial Ship Date
indicator: 'Saving Initial Ship Date...',
tooltip: 'Click to edit Initial Ship Date',
type: 'datepicker',
datepicker: { dateFormat: 'dd/mm/yy'},
sSuccessResponse: "IGNORE",
onblur: 'cancel',
submit:'Save changes'
},//Revised Ship Date
{
//Revised Ship Date
indicator: 'Saving Revised Ship Date...',
tooltip: 'Click to edit Revised Ship Date',
type: 'datepicker',
datepicker: { dateFormat: 'dd/mm/yy'},
sSuccessResponse: "IGNORE",
onblur: 'cancel',
submit:'Save changes'
} ,
{//File No
indicator: 'Saving Code Key...',
tooltip: 'Click to edit Code Key',
type: 'text',
onblur: 'cancel',
submit:'Save changes'},
{//Qty Shipped
indicator: 'Saving Qty Shipped...',
tooltip: 'Click to edit Qty Shipped',
type: 'text',
onblur: 'cancel',
submit:'Save changes'
},
{//ETA
indicator: 'Saving ETA...',
tooltip: 'Click to edit ETA',
type: 'datepicker',
datepicker: { dateFormat: 'dd/mm/yy'},
sSuccessResponse: "IGNORE",
onblur: 'cancel',
submit:'Save changes'},
{ //Received
indicator: 'Saving Received...',
tooltip: 'Click to edit Received flag',
type: 'checkbox',
cancel: 'Cancel',
submit: 'OK',

sSuccessResponse: "IGNORE",
onblur: 'cancel',
submit:'Save changes'},
{ //Date Received
indicator: 'Saving Date Received...',
tooltip: 'Click to edit Date Received',
type: 'datepicker',
datepicker: { dateFormat: 'dd/mm/yy'},
sSuccessResponse: "IGNORE",
onblur: 'cancel',
submit:'Save changes'},

null,//Department
null,//Season
null,//Year
null,//Trip
null, //Brand
null,//Category
null,//Item Code
null,//Group
null,//Fabric
null,//Comments
null//image
],fnShowError: function (message, action) {
switch (action) {
case "update":
alert("ssss");
alert(message, "Update failed");
break;
case "delete":
alert(message, "Delete failed");
break;
case "add":
alert(message, "Add failed");
break;
}
}});

allan

The basic idea looks fine (I don't know much about the editable plug-in, but the first part looks good!). Are you getting any 404 errors in your server's error log?

Allan

steinark

If you don't see the icons shipped with TableTools, maybe you haven't installed them in the right location? They are referred to by TableTools.css as

../images/csv.png

so unless you change the CSS, make sure the PNGs are installed correctly relative to the CSS file location.

If you have Firebug or similar developer plugins installed in your browser, such "dead links" are easy to spot.

sunnyside

and includes

sunnyside

Just to show my piece of code....
$("#orderItemTable").dataTable({"sDom": 'T<"clear">lfrtip',"bFilter": true,bJQueryUI: true,sPagination: "full_numbers","bProcessing": true,"bSort": true,
"aoColumns":[.........

Am I missing something?

And this is all my includes