Hi,

I’m a licenced user and have been implementing DataTables and Editor for an internal project. I’ve prechecked the documentation / forums and can’t get my head around this issue.

I have a Editable datatable, which is loading JSON data successfully from the server.

JSON from server:

{
"data": [
{
"DT_RowId": "row_3",
"FUND_MANAGER": "Graham K4-D15 (Innocap Track)",
"NO_MULTI_MGR_OR_PORT_ALPHA": "ABC",
"PERCENT_SUBINVESTMENT_GRADE": "DEF",
"BENCHMARK_DRIVEN": "",
"MINIMU_SIZE": "",
"UCITS_III": "",
"TOTAL_ASSETS_FUND": "",
"SCORE": "",
"COMMENT": ""},
{
"DT_RowId": "row_1",
"FUND_MANAGER": "SPDR Gold Tracker",
"NO_MULTI_MGR_OR_PORT_ALPHA": "",
"PERCENT_SUBINVESTMENT_GRADE": "",
"BENCHMARK_DRIVEN": "",
"MINIMU_SIZE": "",
"UCITS_III": "",
"TOTAL_ASSETS_FUND": "",
"SCORE": "",
"COMMENT": ""},
{
"DT_RowId": "row_2",
"FUND_MANAGER": "Transtrend (Innocap Track)",
"NO_MULTI_MGR_OR_PORT_ALPHA": "",
"PERCENT_SUBINVESTMENT_GRADE": "",
"BENCHMARK_DRIVEN": "",
"MINIMU_SIZE": "",
"UCITS_III": "",
"TOTAL_ASSETS_FUND": "",
"SCORE": "",
"COMMENT": ""}
],
"options": [],
"files": []
}

On inline editing a cell value and then clicking out, the AJAX request is sent and the server returns the expected JSON but the rows are not being updated. Instead, I get an error message: ‘A system error has occurred (More information)’ under the field taking me to: https://datatables.net/manual/tech-notes/12.

JSON returned:
Have tried returning the above JSON (using the same URL for param ajax: under editor), as well as the following:

{
   "data":    [
        {
            "DT_RowId": "row_3",
            "FUND_MANAGER": "Graham K4-D15 (Innocap Track)",
            "NO_MULTI_MGR_OR_PORT_ALPHA": "ABC",
            "PERCENT_SUBINVESTMENT_GRADE": "DEF",
            "BENCHMARK_DRIVEN": "GEF",
            "MINIMU_SIZE": "",
            "UCITS_III": "",
            "TOTAL_ASSETS_FUND": "",
            "SCORE": "",
            "COMMENT": ""
        }
    ]
}

• I have extracted the HTML and javascript from our page and can be viewed here: https://jsfiddle.net/zsaeed/39brvysm/4/#
• This being an internal application is not accessible outside the site.
• The response headers shown by the browser are correct too:
  Content-type: application/json
• A thought, could it be a version issue with Jquery?

Kind regards

I think it would be nice to have a materialized datatables styling option:
http://materializecss.com/

Also check: Feature Request: Semantic UI
https://datatables.net/forums/discussion/24163/feature-request-semantic-ui

Hi guy's,

I would like to know if this is possible..

I have this table, that when is filtered, I need to delete it's rows that were hidden and save it to the local storage so that when I need the data or to load a table with the new data, it's already filtered.

Thank you.

I am using datatables 1.10.12 and Buttons for DataTables 1.2.0. When a data table has multiple field entries (years in this case) the PDF out put is skewing the columns. Is there a way to format so the date values are aligned top to bottom?. Please see attached for the datatable and the PDF output.

I want to have 2 or more columns customized so that these columns are text aligned left while the whole table is centered.
Here is a link to my jsfiddle
https://jsfiddle.net/ttse23/5xfy50j5/
My other question is how do I to skip over formatting the first row because I have a header in the first row and continue formatting the the columns? I do not want the first row to be formatted because they have a style already

I'm using the example provided here, I was able to setup the search input.

How do I move the search input--currently in the footer, to the header?

Hi Team ,

I am using Datatables with Ajax response in my project .
Everything is working fine ,I upgraded all the related file to latest so Touch can work ,But after applying all the things still the touch on datatable is not working when I am debugging my website in mobile .
Whereas newly introduced features like row reorder and column expand working fine ,Please help .

right now by default it seems to be using this command:

localStorage.setItem('DataTables_table_id_' + window.location.pathname, JSON.stringify(data));

I want to change the first parameter or the key to the data.

'DataTables_table_id_' + window.location.pathname

to something else.

I have a datable..But I have a problem.
I have the code below.

When I ordered the dropdowns (see image): Line code
column.order('asc').draw(false).data().unique().each( function ( d, j ) {

The list of images in the table becomes unordered.
For the table to be sorted, I have to delete this order('asc') from the code.
But I need this to sort the dropdowns.

Can you help me sort the table again?

CODE

      `var table = $('#tableModel').dataTable({
            "initComplete": function (settings, json) {
                var orderInit = this.api().order();
                this.api().columns([1, 2,3,4,5,6,7]).every( function (index) {
                    var column = this;
                    var select =  $('<select class="selectpicker"><option value="">All</option></select>')
                        .appendTo( $(column.footer()).empty() )
                        .on( 'change', function () {
                            var val = $.fn.dataTable.util.escapeRegex(
                                $(this).val()
                            );

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

                    var r = $('#tableModel tfoot tr');
                    r.find('th').each(function(){
                        $(this).css('padding', 8);
                    });

                    $('#tableModel thead').append(r);
                    $('#search_0').css('text-align', 'center');
                    // NOTE: Temporarily sort the column data before retrieving it
                    // with data() function.
                     column.order('asc').draw(false).data().unique().each( function ( d, j ) {
                        select.append( '<option value="'+d+'">'+d+'</option>' )
                    } );**
                } );


            },
            "pageLength": 100,
            "responsive": true,
            "destroy": true,
            "bprocessing": true,
            "bserverSide": true,
            "sAjaxSource": "assets/scripts/getAjax.php",
            "sServerMethod": "POST",
            "pagingType": "simple_numbers",
            "dom": '<"top"fl<"clear">>rt<"bottom"ip<"clear">>',
            "aaSorting": [[0, "desc"]],
            "oLanguage": {
                "sSearch": "Search",
                "sEmptyTable": "No data to display",
                "sInfo": "Showing _START_ to _END_ entries (Total: _TOTAL_)",
                "sLengthMenu": "Show _MENU_ entries",
                "sInfoFiltered": "Filtering _MAX_ entries",
                "sLoadingRecords": "Please wait - loading...",
                "sProcessing": "Processing...",
                "oPaginate": {
                    "sFirst": "First",
                    "sLast": "Last",
                    "sPrevious": "Previous",
                    "sNext": "Next"
                }
            },
            "aoColumns": [
                {"mDataProp": "Image", "bSortable": false, "bVisible": true},
                {"mDataProp": "option1", "bSortable": true, "bVisible": true},
                {"mDataProp": "option2", "bSortable": true, "bVisible": true},
                {"mDataProp": "Age", "bSortable": true, "bVisible": true},
                {"mDataProp": "option4", "bSortable": true, "bVisible": true},
                {"mDataProp": "option5", "bSortable": true, "bVisible": true},
                {"mDataProp": "option6", "bSortable": true, "bVisible": true},
                {"mDataProp": "option7", "bSortable": true, "bVisible": true},
                {"mDataProp": "Edit", "bSortable": false, "bVisible": true},
                {"mDataProp": "Id", "bSortable": true, "bVisible": false}
            ],
            "aoColumnDefs": [

                {"bSortable": true, "aTargets": [0]},
                {
                    "aTargets": [0],
                    "mRender": function (data, type, full) {



                        return '<div class="datatable_cell_margin_25 datatable_cell_center_text">' +
                            '<a class="gallery-item" href=""  data-gallery>' +
                            '<img src="' + pathThumbnail + '" alt="' + data + '"/></a></div>';
                    }
                },
                {"bSortable": true, "aTargets": [1]},
                {
                    "aTargets": [1],
                    "mRender": function (data, type, full) {
                        return '<div class="datatable_cell_margin_25 datatable_cell_center_text">' + data + '</div>';
                    }
                },
                {"bSortable": true, "aTargets": [2]},
                {
                    "aTargets": [2],
                    "mRender": function (data, type, full) {
                        return '<div class="datatable_cell_margin_25 datatable_cell_center_text">' + data + '</div>';
                    }
                },
                {"bSortable": true, "aTargets": [3]},
                {
                    "aTargets": [3],
                    "mRender": function (data, type, full) {
                        return '<div class="datatable_cell_margin_25 datatable_cell_center_text">' + data + '</div>';
                    }
                },
                {"bSortable": true, "aTargets": [4]},
                {
                    "aTargets": [4],
                    "mRender": function (data, type, full) {
                        return '<div class="datatable_cell_margin_25 datatable_cell_center_text">' + data + '</div>';
                    }
                },
                {"bSortable": true, "aTargets": [5]},
                {
                    "aTargets": [5],
                    "mRender": function (data, type, full) {
                        return '<div class="datatable_cell_margin_25 datatable_cell_center_text">' + data + '</div>';
                    }
                },
                {"bSortable": true, "aTargets": [6]},
                {
                    "aTargets": [6],
                    "mRender": function (data, type, full) {
                        return '<div class="datatable_cell_margin_25 datatable_cell_center_text">' + data + '</div>';
                    }
                },
                {"bSortable": true, "aTargets": [7]},
                {
                    "aTargets": [7],
                    "mRender": function (data, type, full) {
                        return '<div class="datatable_cell_margin_25 datatable_cell_center_text">' + data + '</div>';
                    }
                },

`

When the value in #table2 is modified in editor, #table1 needs to redraw as some values has change.
Therefore I have the code:

var editor = new $.fn.dataTable.Editor({
            ajax: 'php/page...[some_link].... .php,
            table: '#table2',
            fields: [
                {
                    "label": "something",
                    "name": "something"
                }
            ]
        }).on('submitComplete', function () {
            var my_table = $('#tabel1').DataTable();
     //       my_table.ajax.reload(); - also tried as I thought it requires to refresh with data from server
            my_table.draw();
        });

But no success. What do I do wrong?

Hi,

In my HTML I added only 2 lines:

I want the jQuery/Datatable to call a WebService to pull column names and data (with paging but no search or sorting to keep it simple). I have tried many ways but I have not been able to get it to work. Can you please help?

Here is the jQuery calls:
var oTable;

        oTable = $('#dte_2').dataTable({
            "bProcessing": true,
            "bServerSide": true,
            "sAjaxSource": "http://localhost/api.asmx/List?what=<%= Request("what") %>",
            "pagingType": "full_numbers",
            "bFilter": false,
            "bLengthChange": false,
            "ordering": false,
            "aoColumns": [
                { "sClass": "center", "bSortable": false },
                null,
                null,
                null,
                { "sClass": "center" },
                { "sClass": "center" }
            ]
        });

Note: If I remove adColumns, the data table no longer displays.

Here is the json I am sending from the webservice:
{
"draw": 1,
"recordsTotal": 57,
"recordsFiltered": 57,
"columns": [
{ "title": "NAME" },
{ "title": "Col2" },
{ "title": "Col3" },
{ "title": "Col4" },
{ "title": "Col5" },
{ "title": "Col6" }
],
"data": [
[ "Cedric", "Kelly", "Senior Javascript Developer", "Edinburgh", "29th Mar 12", "$433,060" ]
]
}

I have following html in the column

<td><span class="nickname-editable editable editable-click" title="Account Nickname" data-model="account" data-name="nick_name" data-value="14 District" data-placeholder="Account Nickname" data-url="/accounts/16979">14 District</span></td>

When i'm exporting i expeting 14 District to go though, but i always get blank column, any hints?

Related code

oTableTools: { aButtons: [{ sExtends: "collection", sButtonText: "Export", sButtonClass: "btn btn-primary btn-sm", aButtons: [{ sExtends: "xls", sButtonText: "Excel", sFileName: "*.xls" }, { sExtends: "pdf", sPdfOrientation: "landscape", }] }], sSwfPath: "/swf/copy_csv_xls_pdf.swf" },
This is true for both PDF and XLS

hi,
Any way to configure that in datatables while doing server side processing??

Can I use entity framework to define the target table and to execute the database operation (insert, update, delete)?
Since I would like to record audit log through entity framework, DataTables cannot help me to achieve this purpose.
Any recommendation?

Why my params are differents before and after the draw call ?

var params = $table.ajax.params();
$table.draw();
var params2 = $table.ajax.params();

The draw function recalculates the columns property, which I would not because index change between each call...

I have built the editable dataTables, here I am around 6 columns out of which I have 1 editable column, if I hit tab key its traversing through all the columns of the dataTable. Now every time I hit a tab key, i should jump to the next rows editable column.

Hi Allan,

Is it possible to generate multiple tables, all on the same div?

My tbales are populated with JSON data from mysql. Every table has different data.

For example:

function getCMTableLevel1() {
    setTimeout(function() {
        var funcid = "get_cm_level_1";
        var jqxhr = $.getJSON('functions/getdata.php', {
            "funcid":funcid}).done(function(dataSet) {
             if (dataSet == null) {
                showAlert();
             } else {
                  $('#datatable-cm-1').dataTable({
                    data: dataSet
            })
            .fail(function() {showAlert();});
    }, 500);
}

another function with different data looks like this:

function getCMTableLevel1() {
    setTimeout(function() {
        var funcid = "get_cm_level_2";
        var jqxhr = $.getJSON('functions/getdata.php', {
            "funcid":funcid}).done(function(dataSet) {
             if (dataSet == null) {
                showAlert();
             } else {
                  $('#datatable-cm-1').dataTable({
                    data: dataSet
            })
            .fail(function() {showAlert();});
    }, 500);
}

This doesn't work as the table is not being drawn/populated..

Regards, Bart

Hey there folks.

This is my first time using this datatable module since it seem to have all the features I need. My basis will be the ASP.NET-Framework with MVC pattern. Web API is consumed for aquiring data via ajax.

But I kinda struggle implementing it. It doesn't work as expected.

Data-sources can vary, so even columns have to be populated at runtime. I didn't found a way to do this with this module, so I created a table with headers populating the model, I am using.
This way I only need to add the data.

Below I'll show a few examples, for better understanding:

Ajax call:

ajax: {
                    url: '../api/session/@Session.SessionID/filecabinet/@Model.FileCabinet.Id/results/@Model.SearchId',
                    dataSrc: function (json) {
                        var obj = JSON.parse(json);
                        return obj.data;
                    }
                }

Sample data returned:

{
  "data": [
    {
      "Doc ID": "629",
      "File Count": "1",
      "Disk Number": "1",
      "Flags": "2",
      "Store Date": "24.06.2016 15:09:10",
      "Store User": "ADMIN",
      "Modification Date": "02.01.2017 09:09:21",
      "Modification User": "ADMIN",
      "Last Access Date": "02.01.2017 09:09:21",
      "Last Access User": "ADMIN",
      "Extension": ".txt",
      "Ablage in Buchhaltung": "TEST",
      "Ablagedatum": "",
      "Absender": "",
      "Abteilung": "PROFORMA 3: 0000000",
      "Aktennummer": "",
      "Aktenstatus": "",
      "Änderungsdatum": "",
      "Annehmer": "",
      "AutoIndex": "",
      "Barcode": "WDD",
      "Bearbeitet von:": "",
      "Beleg-Datum": "20.04.2015 00:00:00",
      "Belegtyp": "",
      "Bemerkung": "",
      "Buchungstext": "",
      "Empfänger": "",
      "Erstzulassung": "",
      "Eskalationsmanager": "",
      "Externe Belegnummer": "",
      "Fahrgestellnummer": "",
      "Fahrzeugtyp": "",
      "Filiale": "",
      "Firma": "",
      "Gescannt von:": "",
      "Geschäftsart": "",
      "GW-Nr.": "",
      "Herstellercode": "",
      "Indexiert von:": "",
      "Kennzeichen": "",
      "Konto-Kreditoren": "",
      "Kostenstelle": "",
      "Kreditorennummer": "180036",
      "Lieferscheinnummer": "",
      "Mandant": "",
      "Mandant_Fibu": "",
      "Marketingprojekte": "",
      "Name": "",
      "Name (2)": "",
      "Ort": "",
      "PLZ": "",
      "Rechnungsbetrag": "",
      "Register": "",
      "Saldo": "",
      "StateTabField": "",
      "Status": "",
      "Strasse": "",
      "Währung": "",
      "Weitergeleitet an:": "",
      "Wiedervorlage am:": ""
    }
  ]
}

Usually I would only send data that actually contains a value (no empty values) to reduce the payload of the call.
But either way, the error keeps the same.

HTML markup:

<table id="resultlist" class="table-striped table-condensed paginated" style="width: 100vw; background-color: #DDD; white-space: nowrap;display: none;">
        <thead class="header bg-primary" style="background-color: #337ab7;">
        <tr>
            @{
                if (!ViewContext.ViewData.ModelState.IsValid || !Model.FieldList.Any())
                {
                    <th class="no-sort" style="width: 100%; padding-top: 6px;"></th>
                }
                else
                {
                    if (Model.FieldList.Any())
                    {
                        var columns = Model.FieldList.OrderBy(c => c.OrderId);
                        var lastid = Model.FieldList.OrderBy(c => c.OrderId).Last().Id;
                        foreach (var col in columns)
                        {
                            <th style="padding-top: 6px; font-weight: normal;">@HttpUtility.HtmlDecode(col.FieldCaption)</th>
                        }
                    }
                }
            }
        </tr>
        </thead>
    </table>

This will populate the columns at runtime.

Any ideas what I am doing wrong?

Debug/Trace:
http://debug.datatables.net/esogas

I also need to know if it is possible to add a column as a template, lets say to contain a button or checkbox.
To be clear: I have to add 3 columns before each row, containing a checkbox, a button and a value (depending on what flag will be received from the database, which is not the problem here. Only the first 2 columns don't have to contain any data from the ajax call).
Since I can add the column names in my json result, I was hoping it will assign it properly, no matter if there is less data, than actual columns (empty values for example).

If i use multi-column ordering and reload the table with (ajax.reload) in the background, the multi-column ordering get lost.
Only the order of for the last column is correct.

Can i store an reload the correct ordering?

table.order() doen't return any multi-column-sort information.

Thanks

It works fine in version 1.5.5 with https://github.com/yajra/laravel-pdo-via-oci8.

Now I have installed editor 1.6.1 and now Oracle doesn't work, especially INSERT and UPDATE.

When INSERTING I'm getting

Fatal error: Uncaught Error: Call to a member function insertId() on boolean in /var/www/html/php/lib/Editor/Editor.php:1601 Stack trace: #0 /var/www/html/php/lib/Editor/Editor.php(1045): DataTables\Editor->_insert_or_update(NULL, Array) #1 /var/www/html/php/lib/Editor/Editor.php(900): DataTables\Editor->_insert(Array) #2 /var/www/html/php/lib/Editor/Editor.php(661): DataTables\Editor->_process(Array) #3 /var/www/html/php/table.cert_vzo.php(40): DataTables\Editor->process(Array) #4 {main} thrown in /var/www/html/php/lib/Editor/Editor.php on line 1601

When UPDATING all the values are replaced by primary key, for example

ID | COLUMN1 | COLUMN2
1  | 56546 | 414

after the UPDATE all the values are replaced by ID

ID | COLUMN1 | COLUMN2
1 | 1 | 1

SELECT is working fine.