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 | .... | 2279 | 2280 | (Page 2281) | 2282 | 2283 | .... | 2326 | newer

    0 0

    I'm completely new to web development and I'm working on Tutorial to get into it...
    I'm having some troubles implementing jquery.Datatables. The controls are not displayed correctly:

    What could that be? I've installed DataTables version 1.10.15 through package manager. I've never changed anything in the CSS....

    Thank You for your help

    0 0

    I'm pilot testing datatables for my company, and I'm able to run the editor/node.js example with mysql running locally on my machine. All the examples run just fine at https://localhost:8081/examples.

    All things being equal, i modify the db.js file to say the following:

    let knex = require('knex');
    module.exports = knex({
        client: 'oracledb',
        connection: {
            host: 'oracledev',
            user: 'test',
            password: 'test',
            database: 'orcl'

    And then attempt to run the example with npm start and i get the following output

    DataTables Editor demo - navigate to http://localhost:8081/
    TypeError: Cannot read property 'replace' of undefined

    the line that comes back right after the server starts is TypeError: Cannot read property 'replace' of undefined And the source of that error i'm finding is very difficult to track down.

    Please advise!

    0 0


    I'm having an issue
    I have a lot of columns let say 15
    I'm using responsive
    I'm using savestate
    When using the main search let say I search for John
    Then I go to another page and get back, the result is ok and still there
    Now if I clear the search field
    Then the columns are not well aligned they are a little bit outside the template
    If refresh the page this is ok.

    This occurred only if I quit and get back and clear the search value.
    It does not occurred if I don't quit the page.

    The only solution I have for now is to reload the page on clear search
    but I'm wondering if someone have encounter this and have a solution for this.

    0 0

    I would like you to click on a search field of the table, select the value that you entered. the same thing that does when pressing double click
    I tried this but it does not work

    function selected(){ //Selecciona un campo con un solo click $("input[type='text']").off("click"); $("input[type='text']").on("click", function () { $(this).select(); }); $("input[type='search']").off("click"); $("input[type='search']").on("click", function () { $(this).select(); }); $("input[type='number']").off("click"); $("input[type='number']").on("click", function () { $(this).select(); }); }

    0 0


    i have the requirement to use DataTables without server side scripts.

    A Dataset is fetched over PDO and stored in an array.
    The content of this array should be processed and modified by PHP. Even new records can be added.
    Afterwards the user can modify and add these records. I would prefer some kind of "inline editing".
    Then the records should be processed again by PHP and written to (/inserted into /updated in) the database using PDO.

    This an example of how the array could look like. Adding new fields to process the array wouldn't be a problem.
    For new inserted records negative RowIDs would be possible or any other form of data type. I'm very flexible at this point so it shouldn't be a big of a problem.
    The user should be able to edit each field and add new records.
    Can you provide an example how this requirement can be accomplished using DataTables?

      "data": [
          "RowId": "1",
          "first_name": "John",
          "last_name": "Miller",
          "email": "",
          "age": "61"
          "RowId": "2",
          "first_name": "Peter",
          "last_name": "Wulf",
          "email": "",
          "age": "63"


    0 0
  • 12/06/18--09:24: How to time table loading?
  • Hi,

    I'm looking for a snippet to time the table loading ..

    using "deferRender": true, seems to take longer to load than "deferRender": false,

    At the moment I'm timing the overall page load,
    so I'd'like to use a snippet to get only the table load part to have a better precise result.


    0 0
  • 12/06/18--09:26: Rendering Decimal Numbers
  • I propose a discussion posted by gaspare.licari in April 2016 but it is still valid now:


    render: $.fn.dataTable.render.number( ',', '.', 2, '€ ' )

    the numeric values with decimals are always displayed with decimal part as zero, even if the values is stored correctly into the Database.
    For example if I edit 1.52, it's displayed as 1.00 and stored into Database as 1.52.

    How can I fix it?".


    0 0
  • 06/09/17--11:14: Row grouping with printing
  • I believe i solved the problem with printing with row grouping. I found a snippet of code on StackOverflow here and was able to fix it up to work with row grouping. This is placed in datatable-buttons.js on line 1564.

    Heres some images of it working!

        var _exportData = function ( dt, inOpts )
            var config = $.extend( true, {}, {
                rows:           null,
                columns:        '',
                grouped_array_index: [],
                modifier:       {
                    search: 'applied',
                    order:  'applied'
                orthogonal:     'display',
                stripHtml:      true,
                stripNewlines:  true,
                decodeEntities: true,
                trim:           true,
                format:         {
                    header: function ( d ) {
                        return strip( d );
                    footer: function ( d ) {
                        return strip( d );
                    body: function ( d ) {
                        return strip( d );
            }, inOpts );
            var strip = function ( str ) {
                if ( typeof str !== 'string' ) {
                    return str;
                // Always remove script tags
                str = str.replace( /<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '' );
                if ( config.stripHtml ) {
                    str = str.replace( /<[^>]*>/g, '' );
                if ( config.trim ) {
                    str = str.replace( /^\s+|\s+$/g, '' );
                if ( config.stripNewlines ) {
                    str = str.replace( /\n/g, ' ' );
                if ( config.decodeEntities ) {
                    _exportTextarea.innerHTML = str;
                    str = _exportTextarea.value;
                return str;
            var header = dt.columns( config.columns ).indexes().map( function (idx) {
                var el = dt.column( idx ).header();
                return config.format.header( el.innerHTML, idx, el );
            } ).toArray();
            var footer = dt.table().footer() ?
                dt.columns( config.columns ).indexes().map( function (idx) {
                    var el = dt.column( idx ).footer();
                    return config.format.footer( el ? el.innerHTML : '', idx, el );
                } ).toArray() :
            var rowIndexes = dt.rows( config.rows, config.modifier ).indexes().toArray();
            var selectedCells = dt.cells( rowIndexes, config.columns );
            var cells = selectedCells
                .render( config.orthogonal )
            var cellNodes = selectedCells
            var grouped_array_index     = config.grouped_array_index;                     //customised
            var no_of_columns           = header.length;
            var no_of_rows              = no_of_columns > 0 ? cells.length / no_of_columns : 0;
            var body                    = new Array( no_of_rows );
            var body_data               = new Array( no_of_rows );                                //customised
            var body_with_nodes         = new Array( no_of_rows );                          //customised
            var body_with_nodes_static  = new Array( no_of_rows );                          //customised
            var cellCounter             = 0;
            for (var i = 0, ien = no_of_rows; i < ien; i++)
                var rows            = new Array( no_of_columns );
                var rows_with_nodes = new Array( no_of_columns );
                for ( var j=0 ; j<no_of_columns ; j++ )
                    rows[j]             = config.format.body( cells[ cellCounter ], i, j, cellNodes[ cellCounter ] );
                    rows_with_nodes[j]  = config.format.body( cellNodes[ cellCounter ], i, j, cells[ cellCounter ] ).outerHTML;
                body[i]                     = rows;
                body_data[i]                = rows;
                body_with_nodes[i]          = $.parseHTML('<tr class="even">'+rows_with_nodes.join("")+'</tr>');
                body_with_nodes_static[i]   = $.parseHTML('<tr class="even">'+rows_with_nodes.join("")+'</tr>');
            /******************************************** GROUP DATA *****************************************************/
            var row_array                       = dt.rows().nodes();
            var row_data_array                  = dt.rows().data();
            var iColspan                        = no_of_columns;
            var sLastGroup                      = "";
            var inner_html                      = '',
            var individual_group_array          = [],
                sub_group_array                 = [],
                total_group_array               = [];
            var no_of_splices                   = 0;  //to keep track of no of element insertion into the array as index changes after splicing one element
            for (var i = 0, row_length = body_with_nodes.length; i < row_length; i++)
                sub_group_array[i]              = [];
                individual_group_array[i]       = [];
                var sGroup                      = '';
                for(var k = 0; k < grouped_array_index.length; k++)
                    sGroup                          = row_data_array[i][grouped_array_index[k]];
                    inner_html                      = row_data_array[i][grouped_array_index[k]];
                    grouped_index                   = k;
                    individual_group_array[i][k]    = row_data_array[i][grouped_array_index[k]];
                    sub_group_array[i][k]           = sGroup;
                total_group_array[i] = sGroup;
                if ( sGroup !== sLastGroup )
                    var table_data              = [];
                    var table_data_with_node    = '';
                    for(var $column_index = 0;$column_index < iColspan;$column_index++)
                        if($column_index === 0)
                            table_data_with_node        += '<td style="border-left:none;border-right:none">'+inner_html+'</td>';
                            table_data[$column_index]   = inner_html + " ";
                            table_data_with_node        += '<td style="border-left:none;border-right:none"></td>';
                            table_data[$column_index]   = '';
                    body_with_nodes.splice(i + no_of_splices, 0, $.parseHTML('<tr class="group group_'+grouped_index+' grouped-array-index_'+grouped_array_index[grouped_index]+'">'+table_data_with_node+'</tr>'));
                    body_data.splice(i + no_of_splices, 0, table_data);
                    sLastGroup = sGroup;
            return {
                header: header,
                footer: footer,
                body:   body_data

    Define grouped_array_index in exportOptions

     exportOptions: {
            // Any other settings used
            grouped_array_index: [<place row to use here>],

    0 0
  • 11/29/18--12:52: Responsive table issues
    1. If I set data-priority tags on the 2nd 3rd and 4th and last column of a table, but not the first, when the table shrinks enough so that the first column is hidden, there's no plus sign to show the table data.
    2. if I have an additional table header row with column based filters, and the page shrinks enough to make a column get hidden, the extra header row and input box isn't hidden. This may compound some of the other issues that I'm seeing. Incidentally, my aggregate footer rows get hidden as expected, as does the column visibility button
    3. If I have a table with a bunch of rows, and I set the priority on 4 of them (as mentioned in the first issue), none of those 4 ever get hidden no matter how small the page gets. Possibly this is caused by the fact that there are still a bunch of extra unhidden header rows due to issue 2
    4. if I have tooltips/popovers/confirmations that I set up in the table, those don't get cloned in the responsive/hidden rows. This is especially problematic when I have something like a delete button with using a confirmation widget to make deletion a 2 step process, but it's annoying when I have a tooltip for an acronym in the table that winds up not working either.

    I'll work on examples shortly

    0 0

        var table = $('#PositionRankings').DataTable({         
            "paging": true,
            "info": false,
            "scrollX": true,
            "scrollCollapse": true,
            "order": [7, 'desc' ],
            dom: 'Bfrtip',
            buttons: [ ]

    I have that table on this page:

    Its using Pagination. The first column of this table is a checkbox, when the user hits the "Create Lineups" button at the bottom, I need to cycle through the table and find all the checkboxes that are checked yes. However my code only finds the ones that are currently showing and not the paginated rows that are hidden currently.

            $checkboxLock = $('.Locked:checkbox:checked');
            var LockArray = '';
            LockArray = $.map($checkboxLock, function(el){            
                if(el.checked) { 
                    return '"' + + '"'; 
                } else {                 

    That's my current code to find them. If I view page source all the records are showing in the actual source. So I just need to know how to find the value of all the rows, not just the ones showing for my first column.

    0 0

    Utter and complete novice to Datatables and jQuery...but I gotta maintain app, so please bear with my ignorance.

    I have a data table in an iframe. When the user uses the widget (I have no idea what the official name of this widget is) that allows the user to select the number of rows to display, I want to resize that iframe to fit based on the number of rows selected.

    Code that fires when I select a new table size from the widget:

    $('#matchingPersonsTable').on('length.dt', function (e, settings, len) {
        console.log('New page length: ' + len);

    The source for the iframeLoaded method:

    function iframeLoaded(elementId) {
        console.log('In iframeLoaded')
        var iFrameID = document.getElementById(elementId);
        if (iFrameID) {
            iFrameID.height = iFrameID.contentWindow.document.body.scrollHeight + 25 + "px";

    It appears that the method for resizing the iframe is being called before the data table finishes its resize, as the first time I select the resize widget the table changes size but the iframe does not....but if I choose a smaller size a second time, the iframe DOES resize. If I then choose the size I originally chose, it fits perfectly.

    What am I doing wrong???

    Second question....when the function to resize the iframe gets called, once all the javascript has completed, I get the following error in Chrome's dev tools console:

    jquery-2.0.3.min.js:4 Uncaught TypeError: e.getAttribute is not a function
        at Function.ot.attr (jquery-2.0.3.min.js:4)
        at Array.<anonymous> (jquery-2.0.3.min.js:4)
        at jquery-2.0.3.min.js:4
        at a (jquery-2.0.3.min.js:4)
        at kt (jquery-2.0.3.min.js:4)
        at Function.ot [as find] (jquery-2.0.3.min.js:4)
        at HTMLDocument.handlers (jquery-2.0.3.min.js:5)
        at HTMLDocument.dispatch (jquery-2.0.3.min.js:5)
        at HTMLDocument.y.handle (jquery-2.0.3.min.js:5)
        at Object.trigger (jquery-2.0.3.min.js:5)

    What is up with this?!?!

    0 0
  • 12/06/18--13:18: KeyTable blurable selector
  • By default the table gets blurred when clicked outside but headings (for sorting), buttons, pagination, etc. are not affected and the table has still a focus.

    Is there an option like a selector to take that elements also into account?

    0 0
  • 12/05/18--13:18: Exclude rows from search
  • Rows with a specific class (or row indexes) should be ignored by the search and remain visible although the search term does not fit. My use case is that new rows are added dynamically and therefore some columns are not filled yet and so they are currently hidden because of an existing search.

    I tried it with $ but this is just an additional search filter.

    Is there an option for this requirement or can I override the default behavior in some way?

    0 0

    I am using SmartAdmin Angular 5 framework 1.9.1, which provides DataTables capabilities. I have installed DataTables 1.10.18, and Select 1.2.6.

    I have the following component.html code, showing only the sa-datatables plugin usage"

        data: sysMsgs,
        columns: [
          {data: 'checked'},
          {data: 'rowid'},
          {data: 'senderID'},
          {data: 'message'},
          {data: 'dateCreated'}
        buttons: [ 'copy', 'csv', 'pdf', 'print',
            extend: 'selected',
            text: 'Delete',
            action: handleDelete()
        columnDefs: [
            targets: 0,
            orderable: false,
            className: 'select-checkbox'
            targets: [2],
            visible: true
        select: {
          style: 'os',
          selector: 'td:first-child'
        order: [[ 1, 'asc' ]],
        searching: true,
        search: {
          smart: false                  
      tableClass="table table-striped table-bordered table-hover">
            <th data-hide="mobile-p">Select</th>
            <th data-hide="mobile-p">ID</th>
            <th data-hide="mobile-p">Sender</th> 
            <th data-hide="mobile-p">Message</th>
            <th data-hide="mobile-p">Date Sent</th>

    The datatable that is created works fine. I get the checkboxes, and the Delete button does call function handleDelete(). My problem is not knowing how to pass, or get, the selected rows in the handleDelete() function, which I have defined in component.ts.

    The DataTables Editor has a Soft Delete example, using jQuery that defines the selected rows like this:

    var rows = table.rows( {selected: true} ).indexes();

    I have tried modifying the sa-datatable, like so:

    <sa-datatable id='table' name='table'
          action: handleDelete(table.rows( {selected: true} ).indexes())

    but, it generates a compile error because table is undefined.

    Any ideas on how to get a list of selected rows in component.ts?



    0 0

    I need to pass Authorization header token with ajax call below is code I am trying

                 sServerMethod: 'post',
                "ajax": {
                    "url": 'http://localhost:111111/api/Support/GetAllTickets',
                    "dataType": 'json',
                    "type": 'Post',
                    "beforeSend": function (xhr) {
                            "Bearer " + sessionStorage.getItem('accesstoken'));
                    "fnServerParams": function (aoData) {
                        aoData.push({ "name": "sdisp", "value": selectedval });
                        aoData.push({ "name": "ticketbystatus", "value": typeofticket });

    this is reaching to web API but parameters is not passed.
    Please help

    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'm currently implementing DataTables Server-Side in a project using Angular as the front-end framework and Laravel as the Back-end framework.

    When rendering the datatable, all data is displayed correctly and both the client's request and the server's response are ok, the only issue is I keep getting a row at the last position of each page saying "No matching records found" even though data is displayed correctly on each page.

    My client side code is the following:

    The client request is sent as follows:

    The server response is received as follows:

    The data renders as follows (I'm showing page #2 for img size purposes):

    0 0

    I try to add a onclick event attribute to all <a> tags with the class "ocond" in a td.

    so instead of giving the onClick event to the td like this:
    $(td).attr('onClick', "saveToDatabase3(this,'pricechange','"+ rowData.price +"','"+ rowData.checkboxes +"')");

    I try to give it to all <a> tags with class "ocond" within the td. I tried it with:
    $(td + " a.ocond").attr('onClick', "saveToDatabase3(this,'pricechange','"+ rowData.price +"','"+ rowData.checkboxes +"')");

    but I had no success. Thank you in advance for any help!

    best greetings

    0 0

    I am new to DataTables and I am trying to discover the details of that issue.I have a table that ı am getting the data's of the tables rows from database.I can list the datas in row with using DataTables but I want to get datas from selected row when i click on the row and use that datas for editing,deleting,etc.

    I have added my code snippet below my message.How can i do that?Can you help me please?


    <html xmlns="">
     <head runat="server">
    <!-- Bootstrap -->
    <link href="Content/bootstrap.min.css" rel="stylesheet"/>
    <link href="Content/dataTables.bootstrap.min.css" rel="stylesheet"/>
    <link href="Content/jquery.dataTables.min.css" rel="stylesheet" />
    <link href="Content/select.dataTables.min.css" rel="stylesheet" />
       <form id="form1" runat="server">
     <div class="container">
    <div class="jumbotron">
           <h5>Hello  <asp:Label ID="lblUser" runat="server" ForeColor="Red"/> </h5>
           <h5><asp:LinkButton ID="btnLogOut" runat="server" ForeColor="Red" CssClass="pull-right" OnClick="btnLogOut_Click" 
       Font-Underline="True">Log Out</asp:LinkButton> </h5>
       <h1>User List</h1>
     <asp:Repeater ID="rptUsers" runat="server">
      <table class="table table-striped table-bordered table-hover" id="UserList">
      <th>User Name</th>
                    <asp:Label ID="lblUserName" runat="server" Text='<%# Eval("UserName~~~~") %>' />
                    <asp:Label ID="lblAdmin" runat="server" Text='<%# Eval("IsAdmin") %>' />
            </tbody> </table>
         <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
         <script src="scripts/jquery-1.12.4.js"></script>
        <!-- Include all compiled plugins (below), or include individual files as needed -->
        <script src="scripts/bootstrap.min.js"></script>
       <script src="scripts/jquery.dataTables.min.js"></script>
        <script src="scripts/dataTables.bootstrap.min.js"></script>
         <script src="scripts/"></script>
          $(document).ready(function () {
                "aLengthMenu": [[4, 8, 12, -1], [4, 8, 12, "All"]],
                "iDisplayLength": 4,
                select: {
                    style: 'single'

    0 0

    i've got a problem with a "" content in a table i build dynamically.

    I've tried to made an example here:

    First of all:
    It's not possible to change the way the table are populated. So i've to keep this piece of code.

    Change list select to "list 1".
    Drag and Drop one of the rows.
    An alert will show you a content.
    It's ok.

    Now change the list in the select (list 2) and drag and drop one of the row again....
    Now, in undefined.
    That's the problem.

    It seems like the first one table init it's going ok and the others ones no.

    What i'm wrong?
    Thanks in advance

    PS: never mind about other errors it's about jsfiddle config.

older | 1 | .... | 2279 | 2280 | (Page 2281) | 2282 | 2283 | .... | 2326 | newer