I can print in FireFox and IE 11 but Chrome and Edge only gives lines (I can see a a "print preview" behind the actual print preview that does have the data).

I've attached a PDF of the results.

How can i fire a callback programatically, in this case rowCallback.
I try tbl._fnCallbackFire('rowCallback') wth no results.
Thanks

I'm working with someone on this. Here is a link to a live table with the problem set up. It's easy enough to add the selected row in table A to table B, but what we'd like to do is remove said row in table B when deselecting it in table A. I've tried a number of ways (applying variations of the examples for the deselect event) to store the row index of selected row in table A to table B when adding it, but I haven't found a solution and the code gets messy fast.

What's the best way to accomplish this? Do we need to add an ID row to the actual data, and find it that way (I'd rather not)? I've tried using the jQuery data() method to attach the index to the row in the select handler, which would be ok. But do I need to do that? I have the feeling there's something simpler that would be good to know.

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 think this might be a bit of a strange question, but...

I need to gather data from my server to display a chart. I plan to use d3js for the chart display and don't plan to render the table for this data.

Since I also can display this as a table on another view, I already have a server endpoint which could return the data I'm looking for, but the endpoint expects the request to be from datatables.

Is there a way to set up datatables so that I can send the request, with appropriate filters, and catch the ajax response to supply to d3, without rendering a table?

I know I can just create another endpoint on the server tailored for what d3 expects. I'm just weighing my options.

I'm using this code to determine whether a given variable is referencing a DataTable object or not:

if(undefined != myObjectVariable.$ && myObjectVariable.$.__dt_wrapper) {
    alert('A DataTable Object');
} else {
    alert('Not a DataTable Object');
}

Since __dt_wrapper is an undocumented internal, I'm wondering how robust this is: might it not be around in future versions? I'm also concerned that there might be a set of variables where myObjectVariable.$ is defined, but myObjectVariable.$.__dt_wrapper is not or is false. (I don't really understand what the $ is about.) Is there a better way to do this?

Hi.

I give some variables to my server side script and want to make a where condition only if variable is set.

Can I make a php if statement in this script? Or is there another solution?

I need this and this is not working:

if($aktiv == '1'){
         ->where( 'tm_pflegestellen.Aktiv', $aktiv, '=')
}
if($schulung == '1'){
         ->where( 'tm_pflegestellen.Schulung', '0000-00-00', '=')
}

Thanks
Rappi

I have been trying to get my live data to update itself. I am finding that it works once, and then never again (once per row) until I refresh the table. So I am not sure what I am doing wrong. Here is the code blocks for what is happening:

This is the table init:

$j('#allOrdersTable').DataTable(
        {
            data: o.single,
            paging: false,
            autoWidth: true,
            searching: true,
            language: {searchPlaceholder: "Please us scan field"},
            order: [[ 8, "asc" ]],
            initComplete: function(settings, json)
            {
                setRowSelection($j(this).attr('id'),0); //send table id
                initMailSelect('sl_ship');
                initWeightChange('t_wt');
                printSingleButton('btn_extra');
                initRemovButton('btn_remove');
                initChangeAddress('popAddress');
                $j('#sysBox').empty().hide().dialog('destroy');
                $j("#allOrdersTable_info").detach().prependTo('#allOrdersTable_wrapper');
                $j("#allOrdersTable_wrapper").prepend( $j('#selCount') );
                $j('#selCount').html('Total Selected: 0');
                $j('#btn_picklist').prop('disabled',false);
                getFulfilledOrders();
                //need to look for duplicate orderID's as these are multiples and hide them.
            },
            rowCallback: function( row, data )
            {
                if ( $j.inArray(data.DT_RowId, selected) !== -1 ) {
                    $j(row).addClass('selected');
                }
            },
            columnDefs:
            [
                { targets: 0, data:'orderID', render: function ( data, type, full, meta )
                    {
                        return '<input type="checkbox" name="chk_ship" id="allChk'+data+'" value="'+data+'" />' ;
                    }
                },
                { targets: 5, data:'orderID', render: function ( data, type, full, meta )
                    {
                        var opt = buildShipOptions(o.single[meta.row]);//build the shipping options list for the select.
                        var msg = '<select id="sl_ship'+data+'" name="sl_ship" data-sl_cost="'+full.amzInfo.mailing+'" data-sl_hot="'+full.amzInfo.hotMail+'" data-sl_wt="'+full.shipWt+'" data-speed="'+full.speed+'">'+opt+'</select>'
                        return msg ;
                    }
                },
                { targets: 6, data:'orderID', render: function ( data, type, full, meta )
                    {
                        var lb= parseInt(full.shipWt);
                        var oz= Math.ceil((full.shipWt - lb)* 16) ;

                        if( oz == 16 )
                        {
                            lb++;
                            oz = 0;
                        }

                        var msg='<input type="text" id="t_lb'+data+'" name="t_wt" value="'+lb+'" data-type="lb"  data-orderid="'+data+'" data-row="'+meta.row+'" style="float:left; width:15px; clear:none;" /><label style="float:left; width:10px; font-weight:normal; font-size:10px; clear:none;">lb</label><input type="text" id="t_oz'+data+'" name="t_wt" value="'+oz+'" data-type="oz" data-orderid="'+data+'" size="1" style="float:left; width:15px; clear:none;" /><!-- <label style="float:left; width:10px; font-weight:normal; font-size:10px;">oz</label>-->'
                        return msg;
                    }
                },
                { targets: 10, data:'orderID', render: function ( data, type, full, meta )
                    {
                        return '<input type="button" name="btn_extra" id="chk'+data+'" value="Extra Labels" data-orderid="'+data+'" />' ;
                        //return 0;
                    }
                },
                { targets: 11, data:'orderID', render: function ( data, type, full, meta )
                    {
                        return '<input type="button" name="btn_remove" id="btn_rem'+data+'" value="Remove" data-orderid="'+data+'" />' ;
                        //return 0;
                    }
                },
            ],
            columns:
            [
                 null,
                {data:'qty'},
                {data:'prodName'},
                {data:'name', className:'popAddress'},
                {data:'state', className:'popAddress'},
                null,
                null,
                {data:'speed'},
                {data:'SellerSKU'},
                {data:'shipDateFormat'},
                null,
                null,
            ],

        });

This is the function that I am having problems with. It works once per, and all most console logs fire every time I use it.
Please note that I am using rows() because row() would simply crash whenever I passed the data to it. And I was copying the data from the row, updating it, and copying it back, just as I am doing now. I tried both an object and an array[0] thinking it needed it in an array.

function initWeightChange(n)
{
    $j('[name="'+n+'"]').each(function()
    {
        $j(this).click(function(){return false;})
        .change(function()
        {
console.log('changing');
            var table = $j('#allOrdersTable').DataTable();
            var ar = new Array();
            var data = table.row( $j(this).parents('tr') ).data();
console.log(data);
            ar.push( data );
            var oID = $j(this).data('orderid');
            var nWt = 0;
            //check if if lbs are 0, if they are, send ounces only
            //if lb > 0 and oz > 0, inc wt + 2, else send just wt + 1;
            if( $j('#t_lb'+oID).val() == 0 )
            {
                if(  $j('#t_oz'+oID).val() > 15 )
                {
                    var nWt = parseFloat($j('#t_oz'+oID).val());
                    nWt = Math.ceil(nWt/16)
                    $j('#t_oz'+oID).val('0');
                    $j('#t_lb'+oID).val(nWt);
                }
                else
                {
                    var nWt = parseFloat($j('#t_oz'+oID).val());
                    nWt = nWt/16;
                }
            }
            else
            {
                if( $j('#t_oz'+oID).val() == 0 ) nWt = parseFloat($j('#t_lb'+oID).val());
                else
                {
                    var oz = parseFloat($j('#t_oz'+oID).val());
                    oz = Math.ceil(oz/16);
                    var nWt = parseFloat($j('#t_lb'+oID).val()) + oz;
                }
            }
            //send data to getRatesV2 as an array[0]
            ar[0].shipWt = nWt;
            table.rows( $j(this).parents('tr') ).data( ar ).draw();
            if( _uspsRateLocal == 1 )
            {
                buildShippingRates(ar)
            }
            else
            {
                pCFC.setSyncMode();
                pCFC.getRatesV2( ar[0] );   //may need to turn this into an array, similar to _uspsRateLocal
            }

console.log( table.rows($j(this).parents('tr')).data() );
console.log( 'ar');
console.log( ar );

            var opt = buildShipOptions( ar[0] );

console.log('opt');
console.log(opt);

            $j('#sl_ship'+oID).find('option').remove().end().append(opt);
            //table.row( $j(this).data('row') ).data( d ).draw( false );

            return false;
        });

});

}

Hello, I am using: https://datatables.net/release-datatables/examples/api/row_details.html and wanted to add a field to update. Everything loads fine but when I hit update, nothing changes in the db. I looked at the debugging tool and it looks like client_billedxxxxxx instead of client_billed=xxxxxx

    $(document).ready(function () {
        editor = new $.fn.dataTable.Editor({
            "ajax": "/api/cdi_master",
            "table": "#example",
            "fields": [
            {
                label: "Client Billed:",
                name: "cdi_details.cdi_master_id",
                type: "radio",
                options: [
                    { label: "Yes", value: 1 },
                    { label: "No", value: 0 }
                ],
                "default": 1
            },
            ]
        });

I am trying to show the datatables on the right page (pagination) with the current date or later with the help of the jumpToData() function, e.g. today is the 2016-08-08. The page of the datatables should automatically (when finished loading) be set on this date (column 0). If the date is not available it should jump to the page with the next date available. So far I have this code:

       jQuery.fn.dataTable.Api.register( 'page.jumpToData()', function ( data, column ) {
        var pos = this.column(column, {order:'current'}).data().indexOf( data );
        var followingdays = 0;
        while(pos == -1 && followingdays < 10){
            var day = (parseInt(data.subString(8))+1);
            if(day > 31){ //wenn >31 monatswechsel
                day = "01";
                var month=parseInt(data.subString(5,7))+1;
                var year = parseInt(data.subString(0,4));
                if(month < 10){
                    month = "0" + month.toString();
                } else if(month > 12){
                    year = year + 1;
                }
                data = year.toString() + "-" +month + "-" + day;
            }else if(day < 10){
                day = "0" + day.toString();
                data = data.substring(0,8) + day;
            }else{
                data = data.substring(0,8) + day;
            }
            pos = this.column(column, {order:'current'}).data().indexOf( data );
            followingdays++;
        }
        if ( pos >= 0 ) {
            var page = Math.floor( pos / this.page.info().length );
            this.page( page ).draw( false );
        }
        return this;
    } );

This is a workaround however since I just look at the current date plus the following 10 days and not the general future of the current date. I can live with that for now hence my first question is that I get a TypeError in the line.

  var day = (parseInt(data.subString(8))+1);

and I dont know why. data.subString(8) should be '08' in the example given. data is correct: '2016-08-08'. The jumpToData() is called in my initComplete method of the datatables:

   "initComplete": function(settings, json) {

                var ftable = $('#table_fuehrungen').DataTable();

                    var today = new Date();
                    var dd = today.getDate();
                    var mm = today.getMonth()+1; //January is 0
                    var yyyy = today.getFullYear();

                    if(dd<10) {
                        dd='0'+dd
                    }

                    if(mm<10) {
                        mm='0'+mm
                    }
                    today = yyyy+"-"+mm+"-"+dd;

                   ftable.page.jumpToData( today, 0 );
              },

Thus my first question is why there is a TypeError on the given line and the second quesion is how do I code it better to jump to the page with the generic future of the current date?

I am using DataTables 1.10.12.

I'm trying to get the table striping. I've setup the various class but it doesn't work. I also noticed that it doesn't work in the example code provided in the documentation. Since I am not using Bootstrap so it's being difficult?

I am overlaying a chart with the table, and plan to have a button to switch display between the chart and the table. I am having trouble controlling the location of the table to overlap the chart. I am not sure if this is a basic css question or if it has to do with datatables itself.

See http://codepen.io/louking/pen/KrJPaR

When I inspect the <div> with class dt-chart-table, I see

.dt-chart-table {
    position: absolute;
}

.dataTables_wrapper {
    position: relative;
    clear: both;
    zoom: 1;
}

It seems like the .dataTables_wrapper position is taking precedence, which is what is causing the problem.

Any suggestions?

Is that confirmed issue, or is it in my implementation only that the filter input fires twice. Once immediately on the first letter typed, and second time after the set delay time. I see that in few of my datatables implementations for version 1.10.10

This is probably an easy question.

When using columns.data, Datatables allows us to use different data for the different data types requested, _ filter sort display type

I understand the purpose of _ filter sort display,

but what is the purpose of type?

Example:

 "data": {
 "_": "phone_for_default",
 "filter": "phone_for_filter",
 "display": "phone_for_display",
 "sort": "phone_for_sort",
 "type": "phone_for_type"   // where is this value used?
 }

I have the following code to initialize the table:

I'm using the Scroller 1.4.0

The on ( 'init.dt' ) event fires correctly, and table.row("#row_" + patientid).select() correctly selects the row, but the scrollTo method does not work.

    table = $('#patients').on( 'init.dt', function () {
                    if (patientid != "") {
                        table.row("#row_" + patientid).select();
                        table.row("#row_" + patientid).scrollTo(false);
                    }

                } ).DataTable( {
            scrollX: true,
            scrollY: 600,
            jQueryUI: true,
            scroller: true,
            pageLength: 50,
            dom: 'Bfrtip',
            ajax: '../php/table.patients.php',
            columns: dataFields,
            select: true,
            lengthChange: false, ///  etc ...

I hope this wasnt asked before but how can I realize a consecutive number/running number in the first column? It should always count the current rows in the list. If I am on page 2 it should begin with e.g. 20, thus it acts like a rowcount. Is there maybe already a plugin for that?

Hi Alan,

when using the length lengthMenu option:

tableOptions.lengthMenu = [
            [10,20,50,100,200,400],
            [10,20,50,100,200,400]
          ];

We used settings._iDisplayLength to get the selected length, and it worked most of the time, but there are cases where it doesn't work, are we using the wrong attribute?

Many thanks,
Yishay

I am trying to get access to extra data in the createRow of dataTables but that data set is not accessible. I create the dataset from the server like this:

$data = Editor::inst( $db, 'message', 'message.messageID' )
->fields(
    ///fields
);

$out = $data->process( $_POST )->data();

if(!isset($_POST['action'])){

 $out['isRead'] = $data->db()->sql( " SELECT a.`createdBy`,b.`isRead`,b.`messageID`,b.`recipientID`
                                                             FROM message a, messageRecipient b
                                                          WHERE a.`messageID` = b.`messageID`
                                                     ORDER BY a.createdAt DESC")->fetchAll();
}

echo json_encode( $out );

Hi Allen or whoever answers this question,

I have a table that I am grouping according to this example:
https://datatables.net/examples/advanced_init/row_grouping.html

My implementation is slightly different than the above in that I am grouping according to the values in one hidden column, and then (hopefully) sorting within that group according to the values in another. In any given group there is one "parent" value and multiple "child" values. The "parent" is the top-most result and the only one visible. The child rows are hidden below the parent until the user clicks on an accordion icon in the parent row and reveals the children.

I assume that the sorting I want to do should happen somewhere inside of this function:

api.column(2, {page:'current'} ).data().each( function ( group, i ) {
           if ( last !== group ) {
                $(rows).eq( i ).addClass('accordion-header');
                    last = group;
                }
} );

But I'm not sure how.

I also have a another question about adjusting pagination so that it only counts "parents" per page as opposed to total rows. I can ask that in a separate question if need be

Any help is appreciated.

Dylan

Very strange, one of my testers found that every single one of my new line or entire line edit bubbles do not close when the X in the upper right is clicked.
In fact there is no error ,nor warning generated in the web console.

<

div class="modal fade in" style="display: block;">

<

div class="modal-dialog">

<

div class="modal-content">

<

div class="DTE DTE_Action_Create">

<

div class="DTE_Header modal-header" data-dte-e="head">
<button class="close">×</button>

<

div class="DTE_Header_Content">

Create new entry

modal close just fine if you click outside or press escape key

Any ideas?
Alternately, how do I hide the close button? Just a CSS change?