Are you the publisher? Claim or contact us about this channel

Embed this content in your HTML


Report adult content:

click to rate:

Account: (login)

More Channels


Channel Catalog

Channel Description:

Recent Discussions — DataTables forums

older | 1 | .... | 2270 | 2271 | (Page 2272) | 2273 | 2274 | .... | 2326 | newer

    0 0

    I am having a massive problem with jQuery datatables, 4 days on this so far.

    I am using the responsive plugin and the colreorder plugin.

    I have set both in the dt options.

    Both work fine individually.

    However, when I use them together my table columns render incorrectly. Here is an example:

    Here, you see the ... that should be in the responsive column instead appearing in the group column. Also, column headings can be wrong sometimes.

    Here is my code to show, hide and reorder columns and then redraw.

    Calling this code once sometimes works and sometimes does not.

    Calling it again sometimes fixes the column problems and sometimes breaks it!

    I am at a loss. Any ideas? If you need more info please ask.

    Note that only 'custom' tabs in the code below are not working since they are the only ones that use the column reorder code.

      showHideColumns(tab: any): void {
        this.getDtInstanceAsSoonAsItIsReady().then((datatable: any) => {
          const columnNames = tab.fields || []
          const allAvailableColumns = this.getAllColumnNames()
          let visibleColumns = [
          if ( === 'summary' || tab.type === 'custom') {
            visibleColumns = [
          const hiddenColumns = []
          if (columnNames) {
            for (const columnName of allAvailableColumns) {
              if (columnNames.indexOf(columnName) >= 0) {
                visibleColumns.push(columnName + ':name')
              } else {
                hiddenColumns.push(columnName + ':name')
          if (tab.type === 'custom') {
            let visibleIndexes = [0, 1, 2, 3] // Fixed columns always present
            visibleIndexes = visibleIndexes.concat( => datatable.column(col + ':name').index()))
            const order = visibleIndexes.concat(datatable.colReorder.order().filter((item) => {
              return visibleIndexes.indexOf(item) < 0
            .visible(false, false)
            .visible(true, false)
          debug('showHideColumns - Draw datatable on tab change (makes HTTP request)')


    0 0

    Hi there

    I've been trying to get autocomplete to work with datatables editor. It works perfectly with the standard js files but when I use the bootstrap files, it does not anchor the autocomplete list to the textbox control on the modal edit form but to somewhere underneath the form, so you can still choose an item by pressing the down arrow but not see the list.

    I've made an example here:

    Could you point me in the right direction to get the list to show underneath the textbox?


    0 0

    I have a problem with the width of the columns.

    Column descriptions are generated separately and the content in the table is generated separately. I use ASP.NET MVC RAZOR for this.

    How do you use JQuery to set the same width for the columns selected in the picture? My goal is for the red lines to be aligned with the green, and the contents of the columns were centered.

    0 0

    "columnDefs": [
                    ``                                                                  "targets": 0,
                                                                                        "defaultContent": "",
                                                                                         "checkboxes": {
                                                                                         "selectRow": true
                                                                                 "targets": -1,
                                                                                 "data": null,
                                                                                "defaultContent": "<i id=\"invoiceButton\" class=\"ion ion-information-circled\" data-toggle=\"modal\" data-target=\"#invoiceModal\" style=\" text-align: center; color: blue; font-size: 16px;\"></i>"
                                                                            { "width": 50, "targets": 0 },
                                                "select": {
                                                                    "style": "multi" ,
                                                                    selector: 'tr>td:nth-child(0), tr>td:nth-child(1)'

    0 0

    I'm trying to populate a datatables table with data from an SQL query from inside a C# webmethod. After days of researching and trial and error, I still can't seem to get it to work. Most of the examples I see are performing server-side rendering but my dataset is relatively small so client-side should be adequate. If I switch to using hard-coded 'data' variable, everything works.

    I suspect the issue lies within the string type being returned from the webmethod. Despite verifying properly formatted JSON string being returned, the table doesn't render. Even if I hard-code a properly formatted JSON string in the webmethod (bypassing the query), I still get the same, renderless, result. I tried passing back an object but that didn't work either.

    I'm stuck and at wits-end.

    Code snipets at:,css,js. FYI, my c# code is in the CSS window.

    0 0
  • 11/29/18--06:05: getting value of idsrc
  • hi

    how can i get the value of idsrc on click of update button

    manish saini

    0 0


    please go to this url "" and search with "01" on "Part Number" input box, you will get about "727 " matching rows but the values are empty, but the data base has the values

    please help me in this, below is the function i am using.

    function searchDataTable(){

    var part_number = $('#part_number').val();

    var description = $('#description').val();

    var manufacture = $('#manufacture').val();




        iDisplayLength: 15,  
        bProcessing: true,
        bServerSide: true,
        searching: false,
        language: {
        "zeroRecords": "<center style='color:red;'>Sorry, no results found based on your search criteria</center>"
        sAjaxSource: "<?php echo base_url() ?>account/signin/getCapabilities",
         "fnServerParams": function (aoData) {
         aoData.push( { "name": "part_number", "value": part_number});
         aoData.push( { "name": "description", "value": description});
         aoData.push( { "name": "manufacture", "value": manufacture});
        aLengthMenu: [
          [15, 20, 25, 50, 100, -1],
          [15, 20, 25, 50, 100, "All"] // change per page values here
        aoColumns: [         



    0 0


    I'm working based on filter example and I manage to make it works perfectly except a little detail : the input field is inserted between colum title and sorting arrows.

    Is it possible to insert input field AFTER sorting arrows?

    I use this code to move inputs from footer to header :

    $('#tblAccount tfoot tr').appendTo('#tblAccount thead');

    0 0


    I have a table with a tfoot, this tfoot consists of values summed up from the table above it, this means it could be a currency/percentage etc.

    When using the print button option it is perfect and the formatting is in place.

    When using the excel button however everything is formatted except for the tfoot which just reverts to standard text with no currency symbol, no commas, no percentage symbols etc.

    Is there a way of getting these back in place?


    0 0
  • 11/28/18--07:29: Print the edit window
  • I have print, export functions working within Data Tables.

    I would like to add print to the editor edit window (ie add print to formButtons) . I have the print button showing but no printing or exports happening within the Edit window

    Any examples, pointers grateful


            buttons: [
                { extend: "create", editor: editor},
                { extend: "edit",
                    editor: editor,
                    formButtons: [
                            label: 'Cancel',
                            fn: function () { this.close(); }
                        'Save row',
                    extend: "selected",
                    text: 'Duplicate',
                    action: function ( e, dt, node, config ) {
                        // Start in edit mode, and then change to create
                            .edit( table.rows( {selected: true} ).indexes(), {
                                title: 'Duplicate record',
                                buttons: 'Create from existing'
                            } )
                            .mode( 'create' );


    0 0

    I have 3 tables, a students table, a contacts table and a table that links the 2, relationships. When editing the relationships table I want to be able to display supplemental information such as student name and contact name but I can't find an example. My intention is to use a template to show the First and Last names of the student and the contact and have them appear as labels/text instead of a read-only input.

    I am using .NET Core and here is the controller code that returns the Json:

    Microsoft.AspNetCore.Http.HttpRequest request = HttpContext.Request;
    using (var db = new Database(_DataTablesConfig.Value.DbType, _DataTablesConfig.Value.DbConnection))
        var keys = new string[] { "StudentID", "ContactID" };
        DtResponse response = new Editor(db, "StudentRelations", keys)
            .LeftJoin("StudentInfo", "StudentInfo.StudentID", "=", "StudentRelations.StudentID")
            .LeftJoin("SchoolInfo", "SchoolInfo.SchoolID", "=", "StudentInfo.SchoolID")
            .LeftJoin("StudentContactInfo", "StudentContactInfo.ContactID", "=", "StudentRelations.ContactID")
        return Json(response);

    Thanks in advance

    0 0

    hi m using inline editing but while clicking on the edit button in the datatable editor dialog box is not coming up
    instead it is showing data on the bottom og the page

    0 0
  • 07/08/17--02:23: Page Methods and Datatable
  • New to this and been pulling my hair out a bit - just trying to get data into the grid as an initial tryout - perhaps someone could give me an example to work off - what I have done so far is! - probably wildly off :(

    just looked and the pagemethod is not even being called

    pagemethod is as follows

        public static string GetUsers() {
            JavaScriptSerializer json = new JavaScriptSerializer();~~~~
            using (AdminEntities e = new AdminEntities()) {
                var result = (from u in e.Users select new { u.userID, u.userName, u.userFullName }).ToList();
                return json.Serialize(result);

    and the script method is as follows:

            "bProcessing": true,
            "bServerSide": true,
            "sAjaxSource": "default.aspx/GetUsers",
            "fnServerData": function (sSource, aoData, fnCallback) {
                    "type": "POST",
                    "contentType": "application/json; charset=utf-8",
                    "dataType": 'json',
                    "url": sSource,
                    "data": aoData,
                    "success": fnCallback

    anyway thank you in advance

    0 0

    I noticed that the nightly version of buttons.html5.min.js now includes an autoFilter for Excel exports. Unfortunately this hangs any spreadsheet that's created from the button when the A to Z (or Z to A) sort is selected from the filter. The filtering itself works fine.

    Does anyone know how to fix this or at least remove the filter before export? This would be a nice feature if it worked!

    I've had to revert back to the published version 1.53 for the buttons to remove the filter.


    0 0
  • 11/29/18--08:16: ajax.reload() won't work
  • I'm trying to do two things.
    1.I want ajax to reload the table every 30 seconds
    2.I want a button that I can press and it will ajax reload the table.

    1. I'm getting a "can't reinitialize datatable etc..." error, tried it without putting it inside a function too.

    $(function () {
            var table = $('#ex').DataTable({
                ajax: "data.json"
            setInterval(function () {
                table.ajax.reload(null, false); // user paging is not reset on reload
            }, 3000);
    1. I'm getting an invalid JSON response (tn/1) error on my code for the button:

      <button id="refresh" class="fas fa-sync-alt fa-lg" style="text-align:right;color:white" type="button"></button>
      $("#refresh").click(function () {
              var table = $('#WTM_LOG').DataTable();

    Any help would be appreciated. Thanks.

    0 0

    I'm using DataTables with the buttons extension (specifically the Export to Excel button) to display data from SharePoint lists. It has worked great for the last year or so, but recently my users have started to get errors when opening the Excel files generated by the Export to Excel button.

    When I click the button, then click "Open" in the IE prompt, Excel opens and pops up:

    "We found a problem with some content in 'so-and-so.xlsx'. Do you want us to try to recover as much as we can? If you trust the source of this workbook, click Yes."

    I click "Yes", and a blank workbook opens. I then get another popup that states:

    "Excel completed file level validation and repair. Some parts of this workbook may have been repaired or discarded.
    Replaced Part: /xl/worksheets/sheet1.xml part with XML error. Undeclared entity. Line 1, column 321020."

    This only happens in IE-11. I've tested the same page in Chrome and Firefox and it works fine. After reading a similar post, I updated all of my buttons libraries with the nightly versions (datatables.buttons.min.js, buttons.datatables.min.css, and buttons.html5.min.js). I also updated to the most recent version of jszip, but I'm still getting the error.

    Any suggestions on what else I can do to try to correct this? Also, is there a way for me to determine which column the Excel error message is referring to?

    0 0

    Hi Allan,

    My website is split into public | private side.

    For public side, I propose to explicitly state the HTML table including data contents, and then apply datatables to that explicit table (like in zero configuration I call this Option 1.

    From my understanding this is the most assured way to get Google to accurately index the contents of public tables.

    The alternative solutions for populating data are to:

    Option 2: Use datatables to import json data held in the same HTML file
    Option 3: Use datatables to import json data obtained via AJAX

    I believe Option 2 and 3 are better suited to private side where Google indexing is not a concern.

    Do you think I am on the right track by using Option 1 for public side?

    Would Option 2 / 3 guarantee indexing on the public side?

    Many thanks and hope you are keeping well :-)


    0 0

    Hi there,

    There are some forum questions similar to what I'm trying to do but I haven't been able to make it work.

    We are pulling data into a DataTable through javascript. I'd like to set the data-order using a different column.

    However, when I try it, I'm throwing an error.

    This pulls in the base data and works:

    var securityTable =  $('#security-table').DataTable({
          "data": securitydata.guards,
          "columns": [
               "className": 'details-control',
               "data": null,
               "orderable": false,
               //creates square for details row
               "render": function () {
                       return '<i class="fa fa-plus-square" aria-hidden="true"></span>';
               "defaultContent": ''
             { "data": "date" },    
             { "data": "place" },
             { "data": "shot" }
          "paging": false,
          "searching": false

    I've tried to modify it to this to set the order of the data column (There is one other column in which I'd like to set the data-order to as well):

                var securityTable =  $('#security-table').DataTable({
                      "data": securitydata.guards,
                      "columns": [
                           "className": 'details-control',
                           "data": null,
                           "orderable": false,
                           //creates square for details row
                           "render": function () {
                                   return '<i class="fa fa-plus-square" aria-hidden="true"></span>';
                           "defaultContent": ''
                         { "data": {
                            _: "date.display",
                            sort: "date.date_sort"
                         } },    
                         { "data": "place" },
                         { "data": "shot" }
                      "paging": false,
                      "searching": false

    I get this error:

    DataTables warning: table id=security-table - Requested unknown parameter '[object Object]' for row 0, column 1. For more information about this error, please see

    If I were doing this through html and jina I'd do something like this:

    {% for d in data %}
            <td data-order="{{d.date_order}}">{{}}</td>
            <td data-order="{{d.shot_order}}">{{d.shot}}</td>       
    {% endfor %}

    The data in json form looks like this:

        "date": "April 15, 2011",
        "date_order": 1,
        "reported": "Yes",
        "place": "Chicago, auto parts yard",
        "shot": "No one hit",
        "shot_order": 24,
        "blurb": "A 52-year-old guard at an auto parts lot shot at a vehicle he said was coming toward him. The man inside the vehicle, accused of stealing equipment from the lot, drove away and was not reported injured.",
        "link": ""

    Thank you!!!

    0 0


    I have the problem that when I set elements to false:

    $.extend($.fn.dataTable.defaults, {
    searching: false,
    lengthChange: false

    Then there are still empty divs being created:

    Those are the divs that are the containers for search and lengthchange. They are now filling up empty space in height, which makes it ugly. Does anyone know if there is a solution for this?

    Thanks, Asa

    0 0

    I have a database that sends and receives JSON and is not configured to parse data in editors default form.
    (for example: data[0][extn] = 2947)

    I keep getting error code 415 (Unsupported Media Type)

    How can I convert the data to JSON before making my ajax call?

older | 1 | .... | 2270 | 2271 | (Page 2272) | 2273 | 2274 | .... | 2326 | newer