Hi Allan,
When I get the table loading error pop up box, (Requested unknown parameter '14' for row 5, column 14. For more information about this error, please see http://datatables.net/tn/4) with the id parameter set to an integer, I know there is a mismatch in the row*col total. I want to catch that error and display a better message to the user. I am pretty sure to use the starter code:

table.on( 'xhr', function ( e, settings, json ) { console.log( 'Ajax event occurred. Returned data: ', json ); } );

I have not been able to find a good example on how to show the user the error before the standard dialog box appears. I just want to state to the user that for example Row 5 is missing an entry and give the details in a more user-friendly format without the default error box showing.
Thanks as always,
bo

Hello everyone,

how is it possible to calculate a non-existing field with the API. E.g. I try to calculate the profit (sellPrice minus purchasePrice).

I tried different ways, but nothing really works.

My current try is this:

Editor::inst( $db, '_stocks' )
->fields(
Field::inst( 'status' ),
Field::inst( 'name' ),
Field::inst( 'profit' ) ->setValue( $row['sellPrice']*$row['purchasePrice'] )
)
->process( $_POST )
->json();

Does anybody has an idea how to solve that issue?

Kind Regards

[[2711647,200,"successful"]]

Hi @ all,

With following script I get a DataTables with a sum footer. I format all floats with currencyFormatter.js Combined with HTML-Tag class .monney. This works great. When I click a table headerlink to sort the table. All floats chance to -NaN €.
Has anybody a clou why this is happen and how to solve this.

$(document).ready(function() {

    $.get('stock.csv', function(data) {
        // start the table
        var html = '<table id="example" class="table table-striped table-bordered dt-responsive nowrap" cellspacing="0" width="100%">';

        // split into lines
        var rows = data.split("\n");

        // parse lines
        j = 0;
        rows.forEach(function getvalues(ourrow) {
                if (j == 0) {
                    // start a table row
                    html += "<thead><tr>";
                    htmltfoot = "<tfoot><tr>";

                    // split line into columns
                    var columns = ourrow.split(";");

                    var arrayLength = columns.length;
                    for (var i = 0; i < arrayLength; i++) {
                        html += "<th><div>" + columns[i] + "</div></th>";
                        if (i == 0){
                                htmltfoot += "<th class=\"sum\">Total:</th>";
                            } else {
                                htmltfoot += "<th class=\"sum money\">Total:</th>";
                            }
                    }
                    // close row
                    html += "</tr></thead>";
                    htmltfoot += "</tr></tfoot></tbody>";
                    html += htmltfoot;
                    j++;
                } else {
                    // start a table row
                    html += "<tr>";

                    // split line into columns
                    var columns = ourrow.split(";");

                    var arrayLength = columns.length;
                    for (var i = 0; i < arrayLength; i++) {
                        if (i == 0) {
                            html += "<th>" + columns[i] + "</th>";
                        } else {
                            if (columns[i] == 0){
                                html += "<td>" + columns[i] + "</td>";
                            } else {
                                html += "<td class='money'>" + columns[i] + "</td>";
                            }
                        }
                    }
                    // close row
                    html += "</tr>";
                }
            })
            // close table
        html += "</tbody></table>";

        // insert into div
        $('#container').append(html);
        $('#example').DataTable({
            "paging": false,
            "footerCallback": function(row, data, start, end, display) {
                var api = this.api();
                nb_cols = api.columns().nodes().length;
                var j = 1;
                while (j < nb_cols) {
                    var pageTotal = api.column(j, { page: 'current'}).data().reduce(function(a, b) {
                            if (b > 0) {
                            sumAB = Number(a) + Number(b);
                            return sumAB.toFixed(2)
                            }
                            else{return Number(a).toFixed(2);}
                        }, 0);
                    // Update footer
                    $(api.column(j).footer()).html(pageTotal);
                    j++;
                }
                OSREC.CurrencyFormatter.formatAll(
                {
                    selector: '.money',
                    currency: 'EUR'
                });
            }
        });
    });
    // Code here end
});

Hello,

I am using datatables to show some transactions. I would like to hide/remove/filter data with null fields as soon as the table load, however, I am unsure how to do it.

Kind regards,

Rodrigo

I have requirements to add a new row at the bottom of the existing table:
- click button "add new row"
- add a row at the bottom of the table with an input field in each column
- click button submit which triggers validation and saving of the values of the added row.

Can it be done with DataTables API?

I need some help. I have been successful in uploading images and they are being stored on to my server. But the trouble is when I look in my database the file name is incorrect. Not sure why that it is.

According to my database the incorrect file name is "editor-fileName". But according to my saving feature of this line of code...

->upload( Upload::inst( $_SERVER['DOCUMENT_ROOT'] . '/images/.../profile__ID__.__EXTN__' )

This gives the correct file name on my server. But storing it into the database with this line of code is incorrect...

->upload( Upload::inst( $_SERVER['DOCUMENT_ROOT'] . '/images/.../profile__ID__.__EXTN__' )
                                ->db( 'Table', 'ID', array(
                                    'Field' => $pathToImg . Upload::DB_FILE_NAME
                                ) )

But according to the documentation: https://editor.datatables.net/manual/php/upload#Database-information

It says that "Upload::DB_FILE_NAME File name (with extension)"

But it's not doing what I want it to. How do I tell it the File Name is what I saved it to? How do I do that?

I have read quite a few solutions to this but none cover my case so I hope somebody can shed some light.

I fetch the table rows via an Ajax call to a REST API on our server. The server returns a "Content-Range" header indicating currently shown records, total records etc.

I intercept the "xhr.dt" event so I can pull the "Content-Range" headers info into the returned data and reformat the returned data in the expected format i.e.

"draw": 1,
"recordsTotal": 100,
"recordsFiltered": 100,
"data": []

But the pagination keeps saying
Showing 0 to 0 of 0 entries (filtered from NaN total entries)

The table declaration with Ajax event handler is:

var _this = this;
this.dataTable = $(ReactDOM.findDOMNode(this.dataTableElem))
        .addClass('nowrap')
        .dataTable({
            ajax: ajaxRequestObj,
            columns: this.tableColumns,
            dom: '<f<t>lip>',
            responsive: true,
            serverSide: true
        })
        .on('xhr.dt', function(e, settings, json, xhr){
            var parsedContentRange = _this.parseContentRange(xhr.getResponseHeader('Content-Range'));
            var formattedTableData = {};
            formattedTableData.recordsTotal = parsedContentRange.total;
            formattedTableData.recordsFiltered = parsedContentRange.total;
            formattedTableData.draw = settings.iDraw;
            formattedTableData.data = json;
        });

parsedContentRange just turns the string "items 0-3/4" into {start: 0, end: 3, total: 4}

Unfortunately I can't give a link to a working example because this is all running in a local test environment at the moment.

This code is almost identical to the scrolling example combined with the ajax data source example. The datatable works as pageable, but it should scroll. Any ideas?

<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>temp.html</title>
<link rel="stylesheet" type="text/css"
    href="https://cdn.datatables.net/v/dt/jq-2.2.4/dt-1.10.13/sc-1.4.2/se-1.2.0/datatables.min.css" />

<script type="text/javascript"
    src="https://cdn.datatables.net/v/dt/jq-2.2.4/dt-1.10.13/sc-1.4.2/se-1.2.0/datatables.min.js"></script>
</head>
<body>

    <table id="keyoffs" class="display" width="100%" cellspacing="0">
        <thead>
            <tr>
                <th>Applied</th>
                <th>Charge #</th>
            </tr>
        </thead>
    </table>

    <script type="text/javascript">
        $(document).ready(function() {
            $('#keyoffs')
            .DataTable(
                    {
                        "ajax" : {
                            "url" : "http://localhost:8080/PracSecure/KeyoffTablePopulator?tableName=keyoffs&key=1234",
                            "dataSrc" : "data",
                            "scrollY" : "200px",
                            "scrollCollapse" : true,
                            "paging" : false
                        }
                    });
        });

    </script>
</body>
</html>

I have six custom buttons that toggles visibility om different sets of columns (all different).
I want to toggle a class on each button when pressed so users can easily see which set of columns that are hidden
Is there a way to toggle a custom button's class?

My custom button definition:

          {
                text: 'Epic',
                action: function (e, dt, node, config) {
                    var columns = oTable.columns('.epic');
                    columns.visible(!columns.visible()[0]);
                }
            }

I have four jquery tabs, each containing a different datatable. For some reason that I can not identify, the paging and search from the third tab is showing up at the bottom of the first tab (see attached image). This portion of the datatable also appears correctly on the third tab as expected. Any help would be appreciated.

       <div id="tabs-1">
            <ul>
                <li><a id="lys" href="#unprocessedDiv" >Unprocessed</a></li>
                <li><a id="lys3" href="#processedDiv" >Processed</a></li>
                <li><a id="prpscts" href="#getprospects" >Prospects</a></li>
                <li><a id="lys2" href="#Leaderboard" >Leaderboard</a></li>
            </ul>

            <div id="unprocessedDiv">
                <table id="unprocessed" width="500" border="0">
                    <thead id="tblhead">
                        <tr>
                            <th class="dthead" scope="col">Advertiser</th>
                            <th class="dthead" scope="col">Account</th>
                            <th class="dthead"  scope="col">Location</th>
                            <th class="dthead"  scope="col">Rep</th>
                            <th class="dthead"  scope="col">Entered</th>
                            <th class="dthead"  scope="col">Ad No.</th>
                            <th class="dthead"  scope="col">Processed</th>
                        </tr>
                    </thead>
                    <tbody id="tblbody"></tbody>
                </table>
            </div>

            <div id="processedDiv">
                <table id="processed" width="500" border="0">
                    <thead id="tblhead">
                        <tr>
                            <th class="dthead" scope="col">Advertiser</th>
                            <th class="dthead" scope="col">Account</th>
                            <th class="dthead"  scope="col">Location</th>
                            <th class="dthead"  scope="col">Rep</th>
                            <th class="dthead"  scope="col">Entered</th>
                            <th class="dthead"  scope="col">Ad No.</th>
                            <th class="dthead"  scope="col">Processed</th>
                        </tr>
                    </thead>
                    <tbody id="tblbody"></tbody>
                </table>
            </div>


            <div id="Prospects" class="hideit">
                <table id="getprospects" width="500" border="0">
                    <thead id="tblhead2">
                        <tr>
                            <th>Rep</th>
                            <th>Prospect</th>
                            <th>Phone</th>
                            <th>SubCategory</th>
                            <th>Rank</th>
                        </tr>
                    </thead>
                    <tbody id="tblbody2"></tbody>
                </table>
            </div>

            <div id="Leaderboard">
                <select name ="leaderboardSelect" class= "forminput11 clearable  c1" id ="leaderboardSelect"  ></select>
                <input type="button" name="getLeader" id="getLeader" value="Get Leader">
                <table id="getleader" width="500" border="0">
                    <thead>
                        <tr>
                            <th width="75px" align="left">Property</th>
                            <th width="75px"  align="left">Sales Rep</th>
                            <th width="75px"  align="left">Sales</th>

                        </tr>
                    </thead>
                    <tbody style="
                           background-color: white;
                           font-size: 12px;
                           text-align: left;
                           " id="tblbody3"></tbody>
                </table>
            </div>

Hi, I'm using datatable in my project and we have a function to jump to a page, and I use the input plugin, but it doesn't work.

Please help.
datatable version is 1.10.13 refer to this.

/*!
DataTables 1.10.13
©2008-2016 SpryMedia Ltd - datatables.net/license
*/

    <script type="text/javascript" src="${ctx}/assets/jslib/jquery.dataTables.js"></script>
    <script type="text/javascript" src="${ctx}/assets/jslib/datatable/input.js"></script>

    <script>
var oTable =  $('#selfConnectionGrid').dataTable({
            "bProcessing": false,   //显示是否加载
            "sScrollX":"100%",
            "bJQueryUI": true,
            "bFilter": false,
            "sScrollY": 400,
            "bSort": true,
            "bInfo": false,
            "bDestroy":true,
            "iDisplayLength":10,
            //"aaSorting": [[ 2, "desc" ]],//给列表排序 ，第一个参数表示数组 。4 就是css grade那列。第二个参数为 desc或是asc
            "sScrollXInner": "100%",
            "pagingType": "input",
            "sAjaxSource":"queryCreditAssociation",
            "bSort": false,   //关闭排序
            "bServerSide":true,//打开服务器模式，这个是最重要的
            "bLengthChange":false, //关闭每页显示多少条数据
            "fnServerData":retrieveData,//自定义数据获取函数
            //"sColumns":["id","productCode","name",connectionType,grantQuota,approvalAmount,status,result,reason,edate],
            "aoColumns": [
                        { "mDataProp": "id",
                        render:function(data,type,row,meta) {
                            var a = '<a href="'+contectPath+'\/creditDetail?id='+data+'" target="_blank">'+data+'</a>'
                    return a;
                }
                },
                { "mDataProp": "productCode"},
                { "mDataProp": "name"},
                { "mDataProp": "connectionType"},
                { "mDataProp": "grantQuota" },
                { "mDataProp": "approvalAmount"},
                { "mDataProp": "status"},
                { "mDataProp": "result",
                        render:function(data,type,row,meta) {
                            var a;
                            if(data.indexOf("退回") > 0){
                                a = '<span class="btn-red">'+data+'</span>'
                            }else if(data.indexOf("通过") > 0){
                                a = '<span class="btn-green">'+data+'</span>'
                            }else{
                                a = data
                            }
                            return a;
                        }
                },
                { "mDataProp": "reason"},
                { "mDataProp": "edate"}
            ]
            }

    </script>

I've initialized x-editable component inside a datatable and the html before reset the colReorder is:

<span class="sg-editable-talla editable editable-click editable-disabled" data-pk="30" data-type="text" tabindex="-1">D3XL-14 (84-108 cm)</span>

But after some modifications in the column order I call this function:

oTable.colReorder.reset();

After that, every span tag is modified, removing "editable editable-click editable-disabled" classes and finally the element lost the x-editable feature magically.

<span class="sg-editable-talla" data-pk="30" data-type="text">D3XL-14 (84-108 cm)</span>

I hope you can help me.

I am beginner in using datatables API, I am using datatables extensively. I want to pre-add some content (headings) in exported excel file and format the columns (center align) in exported excel file. Is there any way of doing this (customizing excel file before generating) or I will have to modify the code.

Also serial number in table is not being rendered as number in exported excel rather it shows objects.

Can you please point me in the direction of the place where to begin for custom excel generation.

Thanks

refer this link in detail... stackoverflow.com/questions/41629322/jquery-datatable-on-click-sortable-columns-does-not-shows-same-sortable-data-in

How can I enable the newline when editing data in a textarea field type

I have in the Datatables instead of Male and Female an Icon and if they is a member of a listed group a check icon instead of 1.
if I want to export the table via print pdf the columns are empty. Is it possible to render the field to the icons if someone click on the Buttons? The icons are fontawesome and render into the table.

I have a page with several datatables tables
I'm using the same var for each, only the ID is different.

var table = $('#list1').DataTable();
var table = $('#list2').DataTable();

First is it good to do that or I should use different var for each table?
If there are no problem to use the same var, how can I init Yadcf the the ID instead of the var?

Now I'm using
yadcf.init(table, [],);
and I'd like to init using ID instead of the var

could you provide the good syntax if possible

Thanks

I have this block of code to create data-sort attributes, but it does not work: after clicking the column heading nothing happens. The table is created correctly, the attributes are there.

Any thoughts? Thanks!

"createdCell": function (td, cellData, rowData, row, col) {
    if ($.inArray(col, [2, 3, 4, 5]) != -1){
         $(td).addClass('queues');
         if (cellData.indexOf('-success') >= 0){
             $(td).attr('data-sort', 'available');
            }
            else{
              $(td).attr('data-sort', 'unavailable');
            }
        };

Hi,

I tried this nice example https://datatables.net/blog/2016-03-25 and it worked pretty well until I added an user with the German special letters like Ä, Ö or Ü (äöü).

In that cases the php API shows a blank page. How can I update the PHP file for the Editor to use these special letters? In some cases I can't controll the datebase so it must be usible with these letters.

Kind regards