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 | .... | 2275 | 2276 | (Page 2277) | 2278 | 2279 | .... | 2326 | newer

    0 0

    I'm trying to create/add editor fields during the "createdRow" callback on the DataTable, because the rows contain information about the field to be edited (e.g., label, type, name). My setup is a little different in that I have a table where the first column is the label, and the second column displays the value (which has a listener on it for editing)

    Here is an example of JSON being returned:

    {"data":[{"id":10277022,"field":"code","type":"text","label":"Code","value":"AE1"},{"id":10277022,"field":"content","type":"textarea","label":"Content","value":"Adverse events1"}]}

    Editor Initialization

        detailsEditor = new $.fn.dataTable.Editor( {
            ajax: {
                create: 'blank.jsp?_response=true&_action=newFootnote',
                remove: 'blank.jsp?_response=true&_action=deleteFootnote',
            table: "#details",
            idSrc: "id"
        } );

    DataTables Initialization:

        details = $('#details').DataTable( {
            paging:         false,
            lengthChange:   false,
            info:           false,
            searching:      false,
            ordering:       false,
            rowId:          "field",
            ajax:   'blank.jsp?_response=true&_action=loadDetails&id=' + $("#details").attr('data-footnote-id'),
            columns: [
                { data: "label" },
                { data: "value" }
            createdRow: function ( row, data, index ) {
                var field = { name: data.field, data: data.value };
        } );


        $('#details').on( 'click', 'tbody td:nth-child(2)', function (e) {
            detailsEditor.inline( this, {
                buttons: { label: '<i class="fas fa-check-circle"></i>', className: 'btn-primary', fn: function () { this.submit(); } }
            } );
        } );

    I keep getting the following error:

     Unable to automatically determine field from source. Please specify the field name.

    I feel I'm close, but missing something. Any ideas?

    0 0
  • 12/01/18--13:51: Date Picker Range
  • The range of selectable dates appears to end with 2028. I have a need to enter dates later than that. Is there a way to extend the range of choosable dates?

    0 0


    I'm trying to get my head around server side loading and I'm not quite grasping the info on this page -

    It looks to me like the Javascript links to the php file (the code in the Server Side Script tab), but nothing links to the JSON data source (the data in the AJAX tab)... Is that right?

    I'm pretty comfortable with something like this (in Javascript):

        $('#example').DataTable( {
            "ajax": "url: link/to/file/data.json"
        } );

    But if I want to serve the data.json file from a different server, then I add a php file to my server but how / where do I link to the data.json file? Trying to recreate the files in the example linked above gives me the error message Ajax error. For more information about this error, please see

    What am I missing? My apologies if it's something basic; I've always been more front-end focused but I'm trying to learn a bit more back end lately


    0 0
  • 12/03/18--19:15: export hidden column
  • have a report with 10 columns. one of the columns is Notes. This field is 500 char. To prevent the Notes column from wrapping the contents and causing a single report line to occupy multiple rows, the plan is to output only the first 50 characters of the notes field. Have another hidden Notes field which will have the entire 500 char.

    When user chooses to export to excel/csv the Hidden Notes field needs to be exported instead of the displayed Notes column. Please suggest a way to achieve this. Thank you.

    0 0

    I've been trying my hand at web-app development for just over two months now and have found Datatables to be super-useful for displaying content for our potential user base. I'd like to use Datatables Editor to provide our users with a way to enter data quickly and easily.

    I have a table like this:

    Each column header and row header represents a Django object (Compound and Strain respectively) for which I'd like the user to be able to fill in a "Concentration" for. I've made a Django model for the "Concentration", which should reference the row header and column header for the cell that it occupies in the table as well as the float value the user inputs.

    The confusing part for me is how to integrate this all using Ajax (which I've used successfully for 48 hours now). In the datatable I have that displays all the Strains, the REST framework API feeds the datatable a list of ALL the Strain objects in my database. Datatables then builds a table around that that can be searched and filtered. Got it, that makes sense. What I don't get is how Datatables will interact with Ajax (and thusly how I build the API) to allow users to instantiate the appropriate Record object given the Compound, Strain and feed it the concentration.

    Sorry if this is rambling a bit...I'm a physicist trying to do a software engineer's job.

    0 0

    Hi! There is my example:,css,js,output

    Problem is:
    There is an script, which is counting checked checkboxes per row and incrementing/decrementing value into "Rate" column. Numbers in this columns wont sort, I dont know why..

    Also I want to sort columns by checked checkboxes, for example: I've checked 2 checkboxes in first column (upper and lower row), When I click thead, I want to get these rows with checked ones on top.

    Is there any way to fix these things?

    0 0

    I could not find the nuget package for both jquery.dataTables.min CSS & Js Version 1.10.19. Could you provide me the link or files

    0 0

    I'm using DataTables 1.10.5. My table uses server side processing via ajax.

            $('#' + id).dataTable({
              processing: true,
              serverSide: true,
              ajax: 'server-side-php-script-url',
              "pagingType": "simple_incremental_bootstrap"

    Everything will work properly if I send 'recordsTotal' in the server response. But I don't want to count the total entries because of performance issues. So I tried to use the pagination plugin simple_incremental_bootstrap. However it is not working as expected. The next button always return the first page itself. If I give 'recordsTotal' in server response this plugin will work properly. I found out that If we don't give 'recordsTotal', the 'start' param sent by datatable to server side script is always 0. So my server side script will always return the first page.

    According to this discussion, server side processing without calculating total count is not possible because “DataTables uses the record count that is passed back to it to deal with the paging controls”. The suggested workaround is “So the display records are needed, but it would be possible to just pass back a static number (like 1'000'000 or whatever) which would make DataTables think there are a million rows. You could hide the information element if this information is totally bogus!”

    I wonder if anybody have a solution for this. Basically I want to have a simple pagination in my datatable with ajax without sending total count from server.

    0 0


    In Editor,
    Is there any possibility to limit the maximum of files uploaded?

    For example: I just want to allow 4 images to upload


    0 0
  • 02/01/16--00:51: Getting rows values as array
  • Hello,

    I am trying to get multiple selected rows values as an array but unfortunately it comes as object only,

         var ids ='.selected').data(), function (item) {
            return item[3];

    by using this code i am getting

    [object, object, object,context:array[1]....]

    but i could not get like...

    [array, array, array...]

    What is wrong with this?

    Thanks, if you need test page link let me know.

    0 0

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

    $("input[type='number']").on("keyup", function () {

    0 0


    Using DataTables with
    "select": { "style": 'multi' },

    When i click on button located in TD it also select current tr. How can i avoid that?

    0 0
  • 12/04/18--06:03: Events on change
  • i would like to excute sum function into salary column , also i need the value change on datatables change .
    For exemple : i was looking for "sLengthMenu onchange " event , i dont know how to do it.

    0 0

    Using HTML form submit via AJAX, I am retrieving data from SQL database and adding it as my existing HTML table rows inside tbody. But datatables is not detecting the dynamically added rows. It always shows as "Showing 0 to 0 of 0 entries" eventhough I have data.

    My form submit code

    $(document).ready(function(e) {
        $('#analyze_submit').click(function() {
       var data = $("#analyze_options_select").val();
                url  :ajaxurl,
                type :'POST',
                data: { 'action': 'expense','analyze_options':data },
                success: function(data){
                    $("#example tbody").html(data);

    Here is my existing table code:

    <table id="example" class="grid">

    Whenever I save the webpage and reopen it in browser, it works as expected. So issue is dynamically added contents are not detecting. I am still new to jquery\javascript.
    how can I resolve this issue?

    0 0

    ColReorder works nice, but I am missing a very important part.

    I am using responsive tables, so sometimes not all columns are visible in the row, and yes in the child row. ColReorder does not allow me to drag the most right visible column to the right. Something which I would like, to change its position which one, or more (depending on the column widths) columns in the child row.

    I would be even nicer if it was possible to drag a column from the child row to the table row, but that is not a functional need, but more an esthetic one.

    0 0

    Dear Allan!
    I see you example:
    You include ../../extensions/Editor/js/dataTables.editor.min.js, but You not include dataTables.editor.js
    If I include ../../extensions/Editor/js/dataTables.editor.min (replace path for my system path) the java drop error:
    dataTables.editor.min.js:1 Uncaught ReferenceError: define is not defined
    at dataTables.editor.min.js:1
    at dataTables.editor.min.js:1
    If i include Editor-1.8.1/js/dataTables.editor.js the ../../extensions/Editor/js/dataTables.editor.min.js error dropp, but the data is loading, and I can edit not fixed column.
    If I click fixed column, the input field not see, but if I type anithing, and press enter, or leave fixed column, the save is called, and the data writing in database, and next reload loading the modified data.

    You can send for me the example ../../extensions/Editor/js/dataTables.editor.min.js unobfuscated source?

    0 0

    I try to use datatable with server side option, but i init table with some value;

    Js part

    var url = '';
      var table = $('#example').DataTable({
        'processing': true,
        'serverSide': true,
        "deferLoading": 50,
        'ajax': {
          'url': url

    Gone an example here

    Actually my init data is displayed but when i try to go on next page, I see processing who is displayed... but new data is never displayed.

    0 0


    I've been trying to use the datatables scroller to load data dynamically as the scrolling happens. The only problem I'm having is with triggering the ajax to fire again. It doesn't call the ajax in an appropriate position in the table. The same problem occurs in the 50k example on this website.

    I've been able to get it to fire by manually setting a height between 25 and 50 viewport height. Here's my initialization:


    `<table id="permissionsTableList" class="hbs-grid hbs-list" style=" width:98%;height: 25vh !important">

    Datatables initialization:

                    destroy: reinit,
                    "bScrollInfinite": true,
                    "bScrollCollapse": true,
                    "order": [0, 'asc'],
                   "deferRender": true,
                    "scrollY": "50vh",
                    "serverSide": true,
                    "scroller": {
                        loadingIndicator: true,
                    "ajax": function (data, callback, settings) {
                            type: "GET",
                            url: "URL?handler=GetData",
                            data: { start: data.start, length: 50 },
                            beforeSend: function (xhr) {
                            success: function (d) {
                                    setTimeout(function () {
                                        draw: data.draw,
                                        data: d,
                                        recordsTotal: @Model.Data.Count(),
                                        recordsFiltered: @Model.Data.Count(),
                                }, 50)

    Any help figuring out this problem is apprfiated.

    0 0

    I am unsure if this is the best place to ask this, if there is a better place please let me know.

    I'm having some trouble replicating the build process, and it appears to have to do specifically with the minimization process. I am able to replicate the non-minimized files exactly, but the minimized versions always have differences.

    The build process described on the github ( does not name any particular version of Closure to use, but none that I have tried yield an exact replica of the minimized versions found on the compiled repo.

    The primary differences seem small: the variables are named differently, there is a slight optimization difference in a series of boolean statements, or there is a difference in information in the header comment. I can't imagine, functionally, the code has changed, but I can't help but think there is a step being missed in build process somewhere.

    I have also attached a diff to show these differences.

    Some information:
    - I am only compiling the javascript, using the 'js' option of the make script, and only comparing the base dataTables build with no extensions.
    - I am using version 1.10.19 of the source (and the same version of the compiled to compare).
    - I am only using Bash and Closure to do this. I do not have PHP, Sass, or JSHint (presumably not needed as I am only compiling the javascript).
    - I have used both the OpenJDK and Oracle to run Closure
    - A coworker also performed this build process, and was able to replicate the same minimized file I had but not the minimized version on the compiled-sources github.
    - I am using an online javascript pretty-printer to allow comparison between the minimized files to be readable. (

    0 0

    I have added child rows from the example . Now I want to add responsive to the table. I have a problem that when I show the child row, the table is way to wide even for the container. I thought maybe there was some configuration problem but notice that when I remove "nowrap" from the table it is fine. But then the responsive does not work. When I have table class="display responsive nowrap" any long text in a TD in child row breaks the width. Is there a way to fix this?
    Here is closed:
    Here it is opened:

older | 1 | .... | 2275 | 2276 | (Page 2277) | 2278 | 2279 | .... | 2326 | newer