hi, I'm calculating the "time since" on a column using mRender, to do so, I added a class to a span, and within a timer I select them and recalculate them. This way I don't refresh all data, but the one that I have to change.

If the user is in the same timezone as the server, no problem, however if the user is in a different timezone, mRender cut the timezone out of the date... is there a way for me to retrieve it?

thanks,
Luis

// table declaration...
{ "sTitle": "Wait" , "width": "100px",
"mRender": function (data, type, row) {
return '<span dt="' + row.dt + '" class="wait_secs" >' + 0 + '</span>';
},

//timer
var update_signal_wait = setInterval( function(){
// wait since signal arrival
var items = $(".wait_secs"); //get all visible items
$.each( items, function( i, item ) {

                   var cur = new Date();
                   var sdt = new Date(item.getAttribute("dt"));
                   var diff = (cur.getTime() - sdt.getTime()) / 1000;
                   var res = '';

                   if ( diff <60)
                     res = diff.toFixed(1).toString() + ' s';
                     else {
                       diff = diff / 60;
                       if ( diff <60)
                         res = diff.toFixed(1).toString() + ' m';
                         else {
                           diff = diff / 60;
                           res = diff.toFixed(1).toString() + ' h';
                           }
                   }
                   item.innerHTML = res;

                  });



                },3000);

I have a datatable using the responsive add-on , which works great.

One column shows a thumbnail image, but I want to hide this column (only) on small devices.

I seem to be able to turn the Responsive child option on or off for all columns, but I don't want to display the image column at all

I'm sure I did something like this before (not using responsive add-on)

Hi Allan
Why it doesn´t work this :

$editor = Editor::inst( $db, 'partsdetail', 'pardetid')
    ->fields(...
        Field::inst( 'partsdetail.modifiedby' )
                    ->setFormatter( function($val, $data, $field) {
                            $pModifiedby = "allan" ;
                            return $pModifiedby;

                      }), ....
        Field::inst( 'parts.customer' )->set(false), ....

    ->leftJoin( 'parts', 'parts.parid', '=', 'partsdetail.parid' )

Simply doesn´t modify 'partsdetail.modifiedby' value.
Thanks

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

Hi,
is it possible to sort a generated column (not present in db and generated with php) server-side?
Thank you

is it easily possible to add a horizontal scrollbar at the top of the table, in addition to the one at the bottom? that would be nice to have if there are many entries

Hi,
following this https://datatables.net/examples/api/multi_filter_select.html example with a server-side table, and having this code:

            this.api().columns('.selectSearch').every( function () {
                var column = this;
                var select = $('<select><option value=""></option></select>')
                        .appendTo( $(column.footer()).empty() )
                        .on( 'change', function () {
                            var val = $.fn.dataTable.util.escapeRegex(
                                    $(this).val()
                            );

                            column
                                    .search( val ? '^'+val+'$' : '', true, false )
                                    .draw();
                        } );

                column.data().unique().sort().each( function ( d, j ) {
                    select.append( '<option value="'+d+'">'+d+'</option>' )
                } );
            } );

The select field is populated with the paginated records, but i would like to have every record from database and not just the ones I'm seeing, so I think I need to perform another query to aggregate data.

Would it be possible?
Thank you
Alex

Hi,

I'm working on a website where fancybox opens a new iframe with some bootstrap Tabs, each containing a datatable.

I'm using the current function to redraw the table to fit the screen responsively:

$(document).ready(function() {
      $('a[data-toggle="tab"]').on( 'shown.bs.tab', function (e) {

       $($.fn.dataTable.tables(true)).DataTable().columns.adjust().responsive.recalc();
    } );
  } );

This works perfectly on my computer when i resize the browser windows to match an iPhone resolution.

But when I try this on the actual iPhone, it works like this:

1. Tab containing datatable clicked - no redraw is done, fullsize datatable with no change
2. Another tab clicked, any tab
3. Back to tab on step 1 - NOW it worked and the table has been responsively resized

Why? As I said works perfect on PC (Chrome).

Edited by Allan - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.

Hi All!

I am trying to make iDislayLength work in a scrollY table with columnar filters as second row below the table header.

I face following problems:
1. The columnar filters show up inside the table as 1st row. As soon as i use sorts on any column, the filter fields disappear
2. Without sorting, when i type in any values in the filter fields, no filtering happens
3. The actual table scrollY area shows all the records rather than showing a small window with scrolling capability
4. Also, i get fnSettings() is not a function error message

I am attaching the following portions of the code:
1. Table definition
wrapperHeight = $('.wmtablewrapper').height();
OrderHdrOutputTbl = $('#xWMOrderTable').DataTable({
width: "100%",
// settings for scrollY style
scrollY: wrapperHeight,
scrollX: false,
pageResize: true,
iDisplayLength : 10,
paging: false,
"dom" : '<<t>i>',
// Common settings
lengthChange : true,
responsive : true,
bAutoWidth : false,
"language" : {
"sInfoEmpty" : "No work orders searched ...",
"sEmptyTable" : "No Work Orders searched",
"sInfo" : "Total of TOTAL work orders in the searched..."
},
"columns" : [ {
// "title": "Work Order#",
"data" : "WorkOrderNo",
"orderable" : true,
"className" : "dt-left",
"width" : "8%",
"fnCreatedCell" : function(nTd, sData, oData, iRow, iCol) {
$(nTd).html("<a href='#'>" + oData.WorkOrderNo + "</a>");
}
}, {
"data" : "OrdDescription",
// "title": "Order Description",
"orderable" : true,
"className" : "dt-left",
"width" : "20%"
}, {
"data" : "CustomerName",
// "title": "Customer Name",
"orderable" : true,
"className" : "dt-left",
"width" : "20%"
}, {
"data" : "JobDescription",
// "title": "Job Description",
"orderable" : true,
"className" : "dt-left",
"width" : "20%"
}, {
"data" : "CreateDate",
// "title": "Create Date",
"orderable" : true,
"className" : "dt-left",
"width" : "8%"
}, {
"data" : "ShipDate",
// "title": "Ship Date",
"orderable" : true,
"className" : "dt-left",
"width" : "8%"
}, {
"data" : "ReturnDate",
// "title": "Return Date",
"orderable" : true,
"className" : "dt-left",
"width" : "8%"
}, {
"data" : "OrderStatus",
// "title": "Status",
"orderable" : true,
"className" : "dt-left",
"width" : "8%"
} ]
});

1. Resize logic when window is resized
   // window resize logic
   $(window).resize(function () {
   var wrapperHeight = $('.wmtablewrapper').height();

    var oSettings = OrderHdrOutputTbl.fnSettings();
    oSettings.oScroll.sY = wrapperHeight;
    OrderHdrOutputTbl.fnDraw();
   

   });

2. Logic for making columnar filters
   $('#xWMOrderTable thead tr#xWMOrderTableHdrFilter th').not(
   ":eq(8)").each(
   //
   function() {
   var title = $('#xWMOrderTable tfoot th').eq(
   $(this).index()).text();
   $(this).html(
   '<input type="text" placeholder="Search '
   + title + '" />');
   });
   // Apply the filter
   OrderHdrOutputTbl.columns().eq(0).each(
   function(colIdx) {
   if (colIdx == 8)
   return; // Do not enable search for that column
   $('input',
   OrderHdrOutputTbl.column(colIdx).header())
   .on(
   'keydown keyup change',
   function() {
   OrderHdrOutputTbl
   .column(colIdx).search(
   this.value)
   .draw();
   });
   });

       }
   }
   

Thanks in advance.
Jaideep

How Can I get the values from hidden columns?

My code is:

"columns": [
{
"data": null,
'render': function (data, type, full, meta){
return '<input class="check-row" type="checkbox">';
}
},
{"data": "column1", "visible":false},
{"data": "column2", "visible":false},
{"data": "column3", "visible":false},
{"data": "column4", "visible":false},
{"data": "column5", "visible":false},
{"data": "column6"},
]

I have a json with the rows selected, but I can´t get the values of the hidden columns, How can I do it?

This is my code for the rows selected:

$.each(rows, function(i, obj) {

var column6=$(obj.row).closest('tr').children('td').eq(1).text();

});

Following is an excerpt:
If I use data, then data are not shown in the table. But if I changed data to sInt & sName, data are shown in the table.
Why is that?

$('#example').DataTable( {

    dom: 'Bfrtip',
type: 'POST',
    bServerSide: true,
    sAjaxSource: "folder/myServlet",
    bProcessing: true,
    spagingType: 'full_numbers',
    bJQueryUI: true,
    select: true,

    columns: [
    { "sInt": "id",
                "bSearchable": false,
                "bSortable": false,
                "bVisible": false  },
        { "sName": "payerID" },
        { "sName": "payerName" },
        { "sName": "contractID" },
        { "sName": "insCo" },
        { "sName": "insType" },
        { "sName": "groupID" },
        { "sName": "eff" },
        { "sName": "term" }

    ],

/* another version with data
{ data: "id",
"bSearchable": false,
"bSortable": false,
"bVisible": false },
{ data: "payerID" },
{ data: "payerName" },
{ data: "contractID" },
{ data: "insCo" },
{ data: "insType" },
{ data: "groupID" },
{ data: "eff" },
{ data: "term" }
*/

Thanks

Hi!

I have created columnar filters in the second row, below the header row as follows:
// setup the columnar filters
$('#xWMOrderTable thead tr#xWMOrderTableHdrFilter th').not(
":eq(8)").each(
//
function() {
var title = $('#xWMOrderTable tfoot th').eq(
$(this).index()).text();
$(this).html(
'<input type="text" placeholder="Search '
+ title + '" />');
});
// Apply the filter
OrderHdrOutputTbl.columns().eq(0).each(
function(colIdx) {
if (colIdx == 8)
return; // Do not enable search for that column
$(
'input',
OrderHdrOutputTbl.column(colIdx)
.header()).on(
'keydown keyup change',
function() {
OrderHdrOutputTbl.column(colIdx)
.search(this.value).draw();
});
});
//

When a new search is done, i want to ensure that all the previous colmnar filters are resetted and values in the input field are cleared.

I have tried the following code:
function clearTableFilters() {
var oSettings = OrderHdrOutputTbl.fnSettings();

    for (var iCol = 0; iCol < oSettings.aoPreSearchCols.length; iCol++) {
        oSettings.aoPreSearchCols[iCol].sSearch = '';
    }
    OrderHdrOutputTbl.fnDraw();
    $("#xWMOrderTable").DataTable().search("").draw();
     // Reset Column filtering
    $('#xWMOrderTable thead tr#xWMOrderTableHdrFilter th').val('').change().draw();

    // Reset column order
    OrderHdrOutputTbl.colReorder.reset();
}

None of this code is actually removing the filters nor clearing the input field.

Any ideas would be appreciated.

Thanks!

I am trying to update a view, but receiving this....

{"error":"SQLSTATE[HY000]: General error: 1288 The target table course_descriptors of the UPDATE is not updatable","data":[]}

its possible to extend button with two options?
ex:
extend: "edit selectedSingle",

{
text: "<i class='fa fa-plus'></i>",
titleAttr: "Add Key (SHIFT + N)",
key: {
shiftKey: true,
key: 'n'
},
formTitle: 'Add Key to ' + product.toUpperCase(),
extend: "create selectedSingle",
editor: editor
}

Hi Allan,

With the Bootstrap Integration the form-inline class on sWrapper is a bit annoying when we want filters on columns.
Having it on the wrapper prevent from having full-width input on the footer without overriding Bootstrap's .form-inline .form-control rule.
What I would suggest is to have form-inline on sDom instead, so you can keep the length input with auto.

I am using DataTables to display a table containing two columns each with

<img src="data:image/png:base64,YaddaYaddaYadda" height="20" width="200">

images in each row. (These are the kind of sparkline images dreamed up by Edward Tufte.)

I'm using serverSide data population with the scroller feature of DataTables.

In the browser these sparkline images work very well. But, when I push the DataTables "Print" button, the images don't show up in the previewed or the printed page.

They do show up when I use the browser debugger to render the page for media="print". I'd really like to be able to print them.

Am I missing something? Is there a way to get the images to print with the "Print" button? Thanks for any wisdom!

Here's the datatables javascript I use.

<script type="text/javascript">
  $(document).ready(function () {
     var dataTableToken = 'XmsuiD5EXMI4UjagtzAq5-y4jkMMTh';
     var myTable = $('#tbl').DataTable({
      order: [[ 3 , 'desc'  ]],
      scrollY: '50vh',
      deferRender: true,
      scroller: true,
      serverSide: true,
      searchDelay: 4000,
      buttons: [ 'copy', 'csv', 'print', 'colvis' ],
      initComplete : function () {
        myTable.buttons().container()
                 .appendTo( $('#tbl_wrapper .col-sm-6:eq(0)'));
      },
      ajax: {
        type: 'POST',
        contentType: 'application/json; charset=utf-8',
        url: '/account/service/DataTables.aspx/Data',
        headers: { 'X-CSRFToken': dataTableToken },
        data: function(params) {
          params.token = dataTableToken;
          /* pass a single JSON struct named parameters to the server */
          return JSON.stringify({ parameters: params });
        }
      }
     });
  });
</script>

Hi,

I'm experiencing an issue with the DTE that I'm hoping is something silly on my part.

The problem is that the editing field does not close initially after submitComplete fires.
The field successfully updates, and the data returns in the required format (see below)

However the field does not close itself.
As seen here - http://imgur.com/mXQFNrw

If I then click on another row in the table, the field does close but it collapses and the cell data is removed.
As seen here http://imgur.com/XTsbZ1p

This is occurring in a bootstrap modal if that makes a difference in Chrome, Edge & IE

Javascript used to trigger this is included below.

Any assistance you can provide would be much appreciated.

// Server response after edit
{
  "data":{
    "TotalRecords":0,
    "Id":209,
    "Name":"AP Pit 1_T11",
    "CreatedOn":"\/Date(1461852000000)\/",
    "CreatedBy":4,
    "IsDeleted":false,
    "UpdatedOn":
    "\/Date(1465518020070)\/"
  }
}


// Set up the modal
$(document).ready(function () {
    debugger;
    MapId = $("#Id").val() !== "" ? $("#Id").val() : 0;

    // Configure the editor for locations
    unusedLocationsDataTableEditor = new $.fn.dataTable.Editor({
        ajax: {
            type: "PUT",
            url: "/Location/UpdateLocation"
        },
        idSrc: "Id",
        table: "#mapUnusedLocationsTable",
        fields: [
            {
                name: "Name"
            }
        ]
    });

    // Configure the unused location data table
    unusedLocationsDataTable = $("#mapUnusedLocationsTable").DataTable({
        processing: false,
        serverSide: false,
        ajax: {
            url: "/Map/GetMapUnusedLocations/" + MapId,
            type: "GET"
        },
        idSrc: "Id",
        dom: "rfti",
        paging: false,
        scrollY: "250px",
        scrollCollapse: false,
        select: {
            style: "os",
            selector: "td:first-child"
        },
        order: [1, "asc"],
        columns: [
            {
                data: null,
                defaultContent: "",
                className: "select-checkbox",
                orderable: false,
                searchable: false
            },
            {
                data: "Name",
                orderable: true
            }
        ]
    });

    // Handle submission responses for location edits as we're returning non standard error responses
    unusedLocationsDataTableEditor.on("submitComplete", function (e, json) {
        if (json.error) {
            unusedLocationsDataTableEditor.field("Name").error("Error: " + json.error);
        } else {
            alertify.success("Location Updated");
        }
    });

    // Enable double click to edit existing locations
    unusedLocationsDataTable.on("click", "tbody td:not(:first-child)", function () {
        unusedLocationsDataTableEditor.inline(this);
    });

Need help on changing row selected text.
ex: " row selected " to "row in use".

Thanks.

This shows properly when in table display mode correctly but when you click Edit it switches values to the first item in line?

{
                label: "Account Type:",
                name: "entitytype",
                type: "select",
                def: "0",
                options:
                [
                                    { label: "COMMITTEE CHAIRMAN",value: "5" },
                                    { label: "CHAIRMAN",value: "6" },
                                    { label: "VICE CHAIR.",value: "14" },
                                    { label: "DIRECTOR",value: "9" },
                                    { label: "PRES. / CEO",value: "1" },
                                    { label: "PRESIDENT",value: "11" },
                                    { label: "CHIEF FINANCIAL OFF.",value: "13" },
                                    { label: "CHIEF LENDING OFF.",value: "16" },
                                    { label: "CHIEF OPERATIONS OFF.",value: "17" },
                                    { label: "REGIONAL PRES.",value: "20" },
                                    { label: "EXEC. VICE PRES.",value: "3" },
                                    { label: "SR. VICE PRES.",value: "4" },
                                    { label: "VICE PRES.",value: "2" },
                                    { label: "CASHIER",value: "25" },
                                    { label: "ASST. VICE PRES.",value: "12" },
                                    { label: "ASST. CASHIER",value: "26" },
                                    { label: "OFFICER",value: "24" },
                                    { label: "RECORDING SECRETARY",value: "21" },
                                    { label: "AUDITOR",value: "27" },
                                    { label: "COMMITTEE MEMBER",value: "15" },
                                    { label: "EX-OFFICIO",value: "19" },
                                    { label: "BANK PRIMARY CONTACT",value: "7" },
                                    { label: "BANK SECONDARY CONTACT",value: "8" },
                                    { label: "BILLING CONTACT",value: "10" },
                                    { label: "AMG SALES CONTACT",value: "22" },
                                    { label: "AMG SUPPORT CONTACT",value: "23" },
                                    { label: "UNASSIGNED",value: "0" },
                                    { label: "DISTRIBUTION",value: "30" },
                                    { label: "BANCPATH ADMIN",value: "29" }
                                ]
            }

Is it a common practice to put DataTables in a wrapper to separate the presentation layer? If so what are the best practices for wrapping DataTables ?

Is there a way to get a dynamic print message. I tried:

``` {
extend: 'print',
message: '

'+message+'

'

```}

but the message variable will not pass