TableTools

TableTools

sunnysidesunnyside Posts: 6Questions: 0Answers: 0
edited January 2012 in Plug-ins
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!

Replies

  • sunnysidesunnyside Posts: 6Questions: 0Answers: 0
    Apologies. i pasted the wrong code in question above. I am using "sDom": 'T<"clear">lfrtip'.
  • allanallan Posts: 61,451Questions: 1Answers: 10,055 Site admin
    Can you post a link to your page please?

    Allan
  • sunnysidesunnyside Posts: 6Questions: 0Answers: 0
    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;
    }
    }});
  • allanallan Posts: 61,451Questions: 1Answers: 10,055 Site admin
    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
  • steinarksteinark Posts: 7Questions: 1Answers: 0
    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.
  • sunnysidesunnyside Posts: 6Questions: 0Answers: 0
    and includes
  • sunnysidesunnyside Posts: 6Questions: 0Answers: 0
    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
This discussion has been closed.