On the column filtering (select inputs) example page (http://www.datatables.net/examples/api/multi_filter_select.html), if you select something from one of the dropdowns, it filters, as expected. If you then select the empty blank entry at the top of the dropdown, which should un-filter (similar to removing text from the search box), it doesn't. It invariably goes to "No matching records found", which doesn't make sense. You can't undo the dropdown filter without reloading the page.

Has anyone else run across this and found a fix? I tried to search the forums, but didn't have any luck. It's like the selection is "sticking" too much, but I'm not sure how to unstick it.

I'm using Ajax GET to call an MVC Controller Action that returns Json. The Json result is returned like this:

[{
"User":
    {
        "Name":"John Doe",
        "Company":"EXAMPLE.COM",
        "CountryCode":"USA",
        "StateCode":"IA",
        "Language":"en-US",
        "CreatedDate":"\/Date(1404523831720)\/",
        "LastLoginDate":"\/Date(1404523831720)\/",
    },

"RoleNames":
    ["Employee","Coordinator"]
},

    ...etc, etc...

]

When I load my page I see that DataTables has the correct number of table rows (15), but none of them have any data. Of course, the following error is a tell-all:

DataTables warning: table id=jsonajaxtable - Requested unknown parameter '0' for row 0. For more information about this error, please see http://datatables.net/tn/4

But I am not sure how (in DataTables' expectations) how to configure the jQuery for the nested objects in my result array (User and RoleNames).

Here is my HTML:

    <table id="jsonajaxtable">
        <thead></thead>
        <tbody></tbody>
        <tfoot></tfoot>
    </table>

and here is my jQuery so far:

    $(document).ready(function () {

        userList = [];

        $.ajax({
            url: "/Admin/UsersList/",
            data: { data: 5 },                   // parameter not needed currently...
            success: function (data) {
                alert("success");
                userList = data;
            },
            error: function (data) { 
                alert("error");
                alert(data); 
            },
            type: 'GET'
        });

        $('#jsonajaxtable').dataTable({
            "aaData": userList.User,
            "aoColumns": [
                { "bSortable": true, "sTitle": "Company", "Company": "Company" },
                { "bSortable": true, "sTitle": "Name", "Name": "Name" }
            ]
        });


        // Add event listener for opening and closing details
        $('#jsonajaxtable tbody').on('click', 'td.details-control', function () {
            var tr = $(this).closest('tr');
            var row = table.row(tr);

            if (row.child.isShown()) {
                // This row is already open - close it
                row.child.hide();
                tr.removeClass('shown');
            }
            else {
                // Open this row
                row.child(format(row.data())).show();
                tr.addClass('shown');
            }
        });
    });

My eventual configuration of DataTables will be to use some of the data in the returned Json to populate Child Rows. I've only been experimenting with DataTables today, so don't be too critical of my coding. I know it's not right. ;-)

Can anyone provide me with an example (given my Json structure) of how to configure the DataTables jQuery to see the data inside of the User object?

Also, what would I need to add to see just one piece of data in a Child Row?

Hello, apologies in advance i'm a newbie when it comes to server side scripting, I'm currently trying to link up DataTables with my sql database which are both hosted on VPS.

I have the following script at the bottom of my .html page

And I have the following code in my server_processing.php file but for some reason I cannot link them up or show the information in my database - I get the internal server error 500 message.

Again apologies.

Can somebody point me in the right direction?

I don't understand why DataTables is throwing this error in FF: TypeError: e[j] is undefined

In IE it's reported as : Unable to get property 'aDataSort' of undefined or null reference

Here is the code

HTML

<table id="fp_promotion_history">
<thead>
    <tr>
        <th>AuditID</th>
        <th>Action</th>
        <th>Description</th>
        <th>User Name</th>
        <th>Audit Date</th>
    </tr>
</thead>
<tbody>
    <tmpl_loop name='fp_history'>
        <tr id="AuditID_<tmpl_var name='AuditID'>">
            <td data-AuditID="<tmpl_var name='AuditID'>"><tmpl_var name='AuditID'></td>  
            <td data-Action="<tmpl_var name='Action'>"><tmpl_var name='Action'></td>
            <td data-Audit_Desc="<tmpl_var name='Audit_Desc'>"><tmpl_var name='Audit_Desc'></td>
            <td data-User_Name="<tmpl_var name='User_Name'>"><tmpl_var name='User_Name'></td>               
            <td data-Audit_Date="<tmpl_var name='Audit_Date'>"><tmpl_var name='Audit_Date'></td>
        </tr>
    </tmpl_loop>
</tbody>
</table>

JQuery

        showDialog({content:data,title:'Financial Promotion Audit Trail History (FPID : ' + $('#fp_promotions_table tr.selected').attr('id') + ')'});                                            

        // turn into a datatable
        $('#fp_promotion_history').dataTable({        
                "sDom": 'R<"H"fr>t<"F"ip>',            
                "bJQueryUI": true,
                "sPaginationType": "full_numbers",
                "iDisplayLength": 25,
                "order": [[ 5, "desc" ]]
        });

What I don't understand is I already have a datatable on the page which is working fine.

I make an AJAX call, display the result (a table) with the JQuery UI Dialog, but when I try to turn it into a DataTable , it just errors?

The documentation implies multiple tables is OK : http://legacy.datatables.net/release-datatables/examples/basic_init/multiple_tables.html

So what am I doing wrong?

Thanks, 1DMF

Possibly something like one of the table tools buttons that you click, a text box pops up and you put an e-mail address in there and hit send.

If not, what's the best way of going about emailing my tables?

My transition from DataTables 1.9 to 1.10 has lead me to change my handling of child rows to the extent where I'm now finding myself needing a callback to be triggered by the draw of a child row. Is this something that can be added?

We've been using DataTables for quite some time now, will definitely look into a donation. Great work.

Object doesn't support property or method 'column'

I get this error trying to run the following code:

var name = $("#monthFilter option:selected").text();
table.column(7).search(name).draw();

Before you tell me to read the FAQs, I did check to make sure I'm using the correct initialization of the table, that is:

 var table = $('#tblForecast').DataTable();

as opposed to:

var table = $('#tblForecast').dataTable();

And still no luck. Am I missing something obvious?

HAVE A PROBLEM WHEN WE PAINT THE ENTIRE ROW USING FIXED COLUMN

tbaProductosAsignados = $('#tbaProductosAsignados').dataTable({ bServerSide: true, sAjaxSource: frmRegistrarDinamica + "ListarProductosDinamicaContable", bProcessing: true, sPaginationType: "full_numbers", sScrollY: "290px", sScrollX: "1500px", sScrollXInner: "150%", bFilter: false, bSort: true, bSortCellsTop: true, fnDrawCallback: function(oSettings) {}, oLanguage: { "sEmptyTable": "Ningun producto asociado a la dinámica contable.", }, .... }

new $.fn.dataTable.FixedColumns(tbaProductosAsignados, { leftColumns: 0, rightColumns: 1 });

$(tbaProductosAsignados + ' tbody').on('click', 'tr', function() { if ($(this).hasClass('row_selected')) { //$(this).removeClass('row_selected'); } else { var odtableAyu = $(tabla).dataTable(); odtableAyu.$('tr.row_selected').removeClass('row_selected'); $(this).addClass('row_selected'); } });

DOES NOT PAINT THE ENTIRE ROW, i.e. DOES NOT PAINT THE FIXED ROW :(

Hello,

I'm trying to implement a search form. The goal is to refresh datatable automatically. Here is my code:

var table = $('#tableRapport').DataTable({
    "ajax": {
        "url": $('#urlRecherche').text(),
        "type": "POST",
        "data": { 
            dateDeb: $('#dateDeb').val(),
            dateFin: $('#dateFin').val(),
        },
    },
});

$('#dateDeb, #dateFin').change(function() {
    table.ajax.reload();
});

The problem is here:

    dateDeb: $('#dateDeb').val(),
    dateFin: $('#dateFin').val(),

When I call the "reload" function, fields are not updated with "val ()".

A solution?

Thanks

We would like to have only a single Child Row open at any one time, so if a user were to click to open a child row what jQuery would I need to execute to close any other open Child Row? I'm pretty sure this will go in the on.click event or in the format() routine that gets called, but I'm not sure of the exact line of code.

Also, given that there could only be a single Child Row open at any given time, I would want to avoid searching the entire list so we can cut down on processing requirements. It should suffice to search only until an open Child Row is found and then stop? Unless of course, there are no other Child Rows open and then it would search them all to make sure.

Or... is there an option that can be set that on DataTables that allows only one Child Row to be open at a time? I couldn't find such an option.

Thanks!

Hi guys,

I want to use DataTable with Bootstrap theme to display my table result (PHP & SQLSRV) where it will be loaded into div using jquery $.get function.

I tried below code but it didn't work. Below is my code for jquery and appreciated if you can provide me some solutions here.

$(document).ready(function () { $("#getData").on('click', function () { var report = $(this).val(); if (report == 'tput') { var tputpage = 'reports/dtput.php', dstrt = $('#from_date').val(), dend = $('#to_date').val(); $.get(tputpage, { dstrt:dstrt, dend:dend }, function (data) { $('.target').html(data,function(){ $('table').dataTable(); }); }); } });

In my code below I am trying to convert a .NET Json serialized date to a human readable form, like maybe mm/dd/yyyy, but I'm not sure how to configure the DataTable column to call a function to make the conversion. All I would like to know is what the aoColumns configuration line would be in order to have the function ToJavaScriptDate() function called.

Can someone give me a pointer?

        var table = $('#jsonajaxtable').DataTable({
            dom: 'T<"clear">lfrtipS',
            "bProcessing": true,
            "iDisplayLength": 10,
            "sAjaxSource": "/Admin/UsersList",
            "sAjaxDataProp": "",
            "aoColumns": [
                {
                    "class": 'details-control',
                    "orderable": false,
                    "mDataProp": null,
                    "defaultContent": ''
                },
                { title: "Name", "mDataProp": "User.Name" },
                { title: "Company", "mDataProp": "User.Company" },
                { title: "Roles", "mDataProp": "RoleNames" },
---->>          { title: "Created Date", 
                         "mDataProp": function ("User.CreatedDate", type, full) { 
                          return ToJavaScriptDate(data); 
                          } 
                    }, 
               // { title: "Created Date", "mDataProp": "User.CreatedDate" },
                { title: "Last Login", "mDataProp": "User.LastLoginDate" }
            ],
            "order": [[2, 'asc']]
        });

Date conversion function:

    function ToJavaScriptDate(value) {
        var pattern = /Date\(([^)]+)\)/;
        var results = pattern.exec(value);
        var dt = new Date(parseFloat(results[1]));
        return (dt.getMonth() + 1) + "/" + dt.getDate() + "/" + dt.getFullYear();
    }

Hello

I am getting an error Uncaught TypeError: Cannot read property 'aDataSort' of undefined

I am using web2py and I am tring to create a simple editable table

Any usefull examples on how to do it

Also with update/delete/add on database

Hello,

I've juste discovered dataTable this morning and I am impressed by its power ! BRAVO for the team...

Is there anybody who found a way to add styles on FixedColumns ? I'd like to add a shadow effect on the right border of the last fixed column for exemple, just to show the FixedColumns principle to users. Even a simple "border-right" should be welcome...

Any idea ?

Thanks for advance, Rémy.

I have a problem when i try to sort my datatable,

You can see below my problem :

Before Sort :

http://i.stack.imgur.com/yeut3.jpg

After Sort :

http://i.stack.imgur.com/9FkL9.jpg

When i try to sort my datatables, he sort but he add my last data below the new data.

// Définition de l'objet datatable
$("#dataTable").dataTable({  "aaData": data,
    "aoColumns": title,
    "bProcessing": true,
    "bServerSide": false,
    "bSort": true,
    "bSortClasses": false,
    "bPaginate": true,
    "sPaginationType": "full_numbers",
    "bJQueryUI": false,
    "aLengthMenu": [10, 15, 25, 50, 100],
    "iDisplayLength": 15,
    "oLanguage": {
        "sProcessing":   "<?=$DataTablesProcessing;?>",
        "sLengthMenu":   "<?=$DataTablesLengthMenu;?>",
        "sZeroRecords":  "<?=$DataTablesZeroRecords;?>",
        "sInfo":         "<?=$DataTablesInfo;?>",
        "sInfoEmpty":    "<?=$DataTablesInfoEmpty;?>",
        "sInfoFiltered": "<?=$DataTablesInfoFiltered;?>",
        "sInfoPostFix":  "<?=$DataTablesInfoPostFix;?>",
        "sSearch":       "<?=$DataTablesSearch;?>",
        "sUrl":          "<?=$DataTablesUrl;?>",
        "oPaginate": {
            "sFirst":    "<?=$DataTableoPaginatesFirst;?>",
            "sPrevious": "<?=$DataTableoPaginatesPrevious;?>",
            "sNext":     "<?=$DataTableoPaginatesNext;?>",
            "sLast":     "<?=$DataTableoPaginatesLast;?>"
        }
    }
});

If you have any idea for this problem.

I tryed to create my table in html but that change nothing.

BR

Hello, I am initializes a table as follows:

var table = $('#example').dataTable(
        {"bPaginate":false, "bSearchable":false,"bInfo":false,"bFilter":false,
            "stateSave": true,
            "stateDuration": 10}
    );

html:

<table id="example" border=1 class="display" cellspacing="0" width="100%">

I populating the table on page and going to another page in the same project with :

window.location.href = "page2.html";

Then return to the first page with:

window.location.href = "page1.html";

When I return to the first I would like for the table to still have the data in it, but it is empty. Any help here would be greatly appreciated.

thanks

I am new to DataTables and haven't found an answer to whether it can support a particular use. I would like to know if this kind of layout is possible:

In a single row:

Column 1 | Column 2 | Column 3 | Column 4

A full length row for small print details

The above layout would be similar to this HTML:

<tr>

<td>

<div id="column1" style="float: left; width: 25%;">Some Text</div> <div id="column2" style="float: left; width: 25%;">Some Text</div> <div id="column3" style="float: left; width: 25%;">Some Text</div> <div id="column4" style="float: left; width: 25%;">Some Text</div> <div id="fullwidth" style="clear:both; width: 100%;">A full line of text</div>

</td>

</tr>

The reason why I am asking is because I need to use DataTable's column sorting for columns 1, 2, 3, and 4. I also want the highlighting to work for the entire row including the 4 columns and the full length 'row' underneath.

Is this possible? If so, how is it done?

Thanks.

Hello!

I am using a table with hidden rows like in this example: http://www.datatables.net/examples/server_side/row_details.html

I want to know if there is a way of searching in the data that is hidden in row details? I hope i was clear enough. Thank you!

Razvan

Hi

Ive just started using Server Side and am getting an error when returning the ajax call

error from chrome dev tools: Cannot read property 'sEcho' of null

The table never renders Any ideas? Code below

this is my javascript

        var dTable = GetSearchObj('itemsTable');
        var query = GetSearchObj('query').value;

            $(dTable).html('<table cellpadding="0" cellspacing="0" border="0" class="table table-striped small-row basket-font vert-align" id="dTable"></table>');
            $('#dTable').dataTable({
                "sDom": "<'row-fluid'<'span6'T><'span6'>r>t<'row-fluid'<'span6'i><'span6'p>>",
                "iDisplayLength": 20,
                "sPaginationType": "bootstrap",
                "bAutoHeight": true,
                "aLengthMenu": [[25, 50, 100, 150, 250, 500, -1], [25, 50, 100, 150, 250, 500, "All"]],
                "bStateSave": false,
                "bPaginate": true,
                "bProcessing": true,
                "bServerSide": true,
                "bDestroy": true,
                "sAjaxSource": serviceURL + "GetServerItems",
                "aoColumns": [
                    { "mData": "itemNo", "sTitle": "Item No.", "sWidth": "120px", "sClass": "vert-align" },
                    { "mData": "Description", "sTitle": "Description", "sClass": "vert-align" },
                ],
                "fnServerParams": function (aoData) {

                    aoData.push({ "name": "iQuery", "value":  query });

                },
                "fnServerData": function (sSource, aoData, fnCallback) {
                    $.ajax({
                        "dataType": 'json',
                        "contentType": "application/json; charset=utf-8",
                        "type": "GET",
                        "url": sSource,
                        "data": aoData,
                        "success":
                                    function (msg) {

                                        var json = jQuery.parseJSON(msg.d);
                                        fnCallback(json);
                                    }
                    });
                }
            });

and this is the JSON returned form the server

{ "sEcho": 1, "iTotalRecords": 2, "iTotalDisplayRecords": 2, "aaData": [ { "itemNo": "52352", "description": "Makita UD2500/2 240V Electric Shredder", "unitPrice": null, "quantity": null, "add": null, "stock": null, "itemName": null, "boxQty": null, "brand": null, "barcode": null, "attributes": null, "thumbnail": null, "modalAdd": null }, { "itemNo": "MSAN2030680", "description": "Makita Switch for Silent Shredder 12A", "unitPrice": null, "quantity": null, "add": null, "stock": null, "itemName": null, "boxQty": null, "brand": null, "barcode": null, "attributes": null, "thumbnail": null, "modalAdd": null } ] }

I am new to here and trying to implementing Datatables with server-side processing, with ajax, below I have given my code,

function loadTable(){ tableObj = $("#example_List"); sud = $.ajax({ type: 'GET', url: '/user/search', dataType: 'json', data : {"sortBy": '', 'offSet': '1', 'limit' : 10, 'keyword':'', 'order': 1}, success:function(serviceResponse){ tableLoadObj(serviceResponse); } });

function tableLoadObj(responseObject){ payloadJSON = responseObject.userModels; headerCols = [{"mDataProp": "firstName",'sWidth': '100px', 'sTitle': 'First Name'}, { "mDataProp": "lastName",'sWidth': '100px', 'sTitle': 'Last Name'}, { "mDataProp": "email",'sWidth': '100px', 'sTitle': 'Email'}, { "mDataProp": "gender",'sWidth': '100px', 'sTitle': 'Gender'}]

dtObj = initDataTable(tableObj, responseObj, headerCols); }

..................................................................................................................................

function initDataTable(tableObj, responseObj, headerColumns){ var payloadJSON = responseObj;

var dataTable = $(tableObj).dataTable({ "pagingType": "full_numbers", "iTotalPages":responseObj.count "aaData": payloadJSON, 'aoColumns': headerColumns });

return dataTable; }

here I am unable to get the Pages for pagination as per the total count of record and also unable to put the server-side sort

please help to go forward

Thanks