Greeting, I have a project list in my page, When I click on a project a DataTable with column filter in a dropdown list will be display. Its working but there's a slight bug in it.

Whenever I filter the table using the dropdown list several times, the table position become distorted and it keep expanding

Here's my code

HTML

<table id="workorder_table" class="display table table-responsive">
<thead>
<div class="btn-group" role="group" aria-label="...">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"><span>Column Filter</span> <span class="caret"></span></button>
        <ul id="myDropdown" class="dropdown-menu">
            <li><a href="#" class="toggle-vis" data-column="0"><i class="fa fa-check"></i> A</a></li>
            <li><a href="#" class="toggle-vis" data-column="1"><i class="fa fa-check"></i> B</a></li>
            <li><a href="#" class="toggle-vis" data-column="2"><i class="fa fa-check"></i> C</a></li>

        </ul>
    <button type="button" class="btn btn-success" data-toggle="modal" data-target="#create_workorder_modal"><span
        class="hidden-md hidden-sm hidden-xs">Create Workorder</span> <i
        class="fa fa-fw fa-plus"></i></button>
</div>

<tr>
    <th class="small text-muted text-uppercase"><strong>A</strong></th>
    <th class="small text-muted text-uppercase"><strong>B</strong></th>
    <th class="small text-muted text-uppercase"><strong>C</strong></th>
</tr>
</thead>
</table>

javascript

<script>
    $(document).ready(function() {
        var table = $('#workorder_table').DataTable( {
            "scrollY": "200px",
            "paging": false
        } );

        $('a.toggle-vis').on( 'click', function (e) {
            e.preventDefault();

            // Get the column API object
            var column = table.column( $(this).attr('data-column') );

            // Toggle the visibility
            column.visible( ! column.visible() );
        } );
    } );
</script>
<script>
    $('#myDropdown > li > a').click(function(e){
        $(this).toggleClass('selected');
        $('.dropdown-menu').dropdown('toggle');
    });
</script>

Any help is much appreciated

Hi.
Using datatables with serverSide.
I need to refresh current page, reading data from backend, and select specific row.

    var globalRowSelector = null;
    var testTable = $testtable.DataTable({
            serverSide : true,
            select : {style : 'single'},
            ajax: ...,
            columns: ...,
            drawCallback : function() {
                console.log("on drawCallback");

                var api = this.api();
                // select row by globalRowSelector or first row
                api.row(globalRowSelector != null ? globalRowSelector : 0).select();
            }
    });

    testTable.on("select", function() {
            console.log("on table select");
    });

    $("#testbtn1").click(function(e) {
            globalRowSelector = 2; // need to select third row after page refresh
            testTable.ajax.reload(null, false);
    })

On button click I see data on page refreshed, the third row gets selected for a moment and then "on table select" fires again and selects row number 0 again. I can't prevent this from happening.
Or if I select another row manually and hit the button, again row number 2 gets selected for a moment and then selection gets back to previously selected row.
Why does this happen? How can I programmatically select a specific row after page refresh?

"datatables.net": "^1.10.16",
"datatables.net-bs": "^2.1.1",
"datatables.net-select-bs": "^1.2.3",

Hello Forums,

I am using DataTables for the first time. I came to this problem where I need the sum of rows in the footer.

I have tried the footer callback, but I can't make it work. Would you help achieve this? Please guide where I might be wrong.

Here is my code.

/* Data tables*/
$('#table-summary-per-customer').DataTable({
"footerCallback": function ( row, data, start, end, display ) {
var api = this.api(), data;
// Remove the formatting to get integer data for summation
var intVal = function ( i ) {
return typeof i === 'string' ?
i.replace(/[\$,]/g, '')*1 :
typeof i === 'number' ?
i : 0;
};
// Total over all pages
total = api
.column( 4 )
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
}, 0 );
// Total over this page
pageTotal = api
.column( 4, { page: 'current'} )
.data()
.reduce( function (a, b) {
return intVal(a) + intVal(b);
}, 0 );
// Update footer
$( api.column( 4 ).footer() ).html(
'$'+pageTotal +' ( $'+ total +' total)'
);
}
});

And my HTML

<table id="table-summary-per-customer">
<thead>
<th>Customer</th>
<th>Month</th>
<th>Year</th>
<th>Net Sales</th>
</thead>
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
<tbody>
<?php foreach ($test as $result): ?>
<tr>
<td><?php echo $result['Customer']; ?></td>
<td><?php echo $result['Month']; ?></td>
<td><?php echo $result['Year']; ?></td>
<td><?php echo $result['NetSales']; ?></td>
</tr>
<?php endforeach ?>
</tbody>
</tfoot>
</table>

Thanks a lot. I appreciate it .

Hello.
I'm using DataTables with Select extension.
select: {style: "single"}
So user selects a row by clicking on it.
I don't want the row to be deselected when user clicks on it again. Just do nothing.
Any informaton on how to stop deselect event?

"datatables.net": "^1.10.16",
"datatables.net-bs": "^2.1.1",
"datatables.net-select-bs": "^1.2.3",

Hi,

I am evaluating the datatable editor for my project and downloaded the trial version. My intention is to use it with REST services.

I am able to invoke the rest service on edit and the rest service is returning an array of objects just like my initial rest service. But the data returned in the edit rest service is not getting updated in the datatable. I have set the idSrc so as to uniquely identify the row but still it doesnt seem to work.

Appreciate your help.

Thanks,
Bhuvana

how i save columns reordering state in database?
how i sent column order in database???

Hello sir, I just wanna ask why this error appears in IE11 and what's the possible solutions am I going to use.
I have a screenshot provided of what is the error. I already searched for the possible solutions in you site and I also tried to use 'excel','excelFlash', 'excelHtml5' but all of them got this error when I download and open the file.
Then this is the my code for now:

  $('#premium_stmt_tbl').dataTable({
      "bDestroy": true,
      "aaSorting": [],
      "iDisplayLength": 20,
      "aLengthMenu": [[20, 40, 60, 80, 100, -1], [20, 40, 60, 80, 100, "All"]],
      "scrollX": true,
      "responsive": true,
      "processing": true,
      "oLanguage": {
        "sSearch": '<div class="input-group">_INPUT_<span class="input-group-addon"><i class="fa fa-search"></i></span></div>',
        "sSearchPlaceholder": "Search...",
        "sProcessing":"Loading Policies..."
      },
      dom: 'B<"col-sm-6"l><"col-sm-6"f>rtip',
      buttons: [
          { extend: 'excel', footer: true },
          { extend: 'pdfHtml5',
            footer: true,
            orientation: 'landscape',
            pageSize: 'LEGAL',
            exportOptions: {
              columns: [0,1,2,3,4,5,6,7,8,9],

            }
          }
      ],
      "columns" : [
            { "width": "100px"},
            { "width": "60px"},
            { "width": "110px"},
            { "width": "110px"},
            { "width": "150px"},
            { "width": "90px", className: "text-center"},
            { "width": "100px", className: "text-center"},
            { "width": "50px", className: "text-right"},
            { "width": "50px", className: "text-right"},
            { "width": "60px", className: "text-right"},
            { "width": "10px"}
      ],
      "footerCallback": function ( row, data, start, end, display ) {
          var api = this.api(), data;

          // Remove the formatting to get integer data for summation
          var intVal = function ( i ) {
              return typeof i === 'string' ?
                  i.replace(/[\$,]/g, '')*1 :
                  typeof i === 'number' ?
                      i : 0;
          };

          // Update footer
          $( api.column( 6 ).footer() ).html(
              '<strong>Total:</strong>'
          );

          // Total over this page
          billedTotal = api
              .column( 7, { page: 'current'} )
              .data()
              .reduce( function (a, b) {
                  return intVal(a) + intVal(b);
              }, 0 );

          // Update footer
          $( api.column( 7 ).footer() ).html('<strong>$'+billedTotal.toFixed(2).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,")+'</strong>');

          cancelledTotal = api
              .column( 8, { page: 'current'} )
              .data()
              .reduce( function (a, b) {
                  return intVal(a) + intVal(b);
              }, 0 );

          // Update footer
          $( api.column( 8 ).footer() ).html('<strong>$'+cancelledTotal.toFixed(2).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,")+'</strong>');

          netdueTotal = api
              .column( 9, { page: 'current'} )
              .data()
              .reduce( function (a, b) {
                  return intVal(a) + intVal(b);
              }, 0 );

          // Update footer
          $( api.column( 9 ).footer() ).html('<strong>$'+netdueTotal.toFixed(2).replace(/(\d)(?=(\d\d\d)+(?!\d))/g, "$1,")+'</strong>');
      },
      "serverSide": true,
      "ajax": {
        url : url+"premium-production-list",
        type: 'POST',
        dataFilter: function(data){
          var json = jQuery.parseJSON( data );
          json.recordsTotal = json.recordsFiltered;
          json.recordsFiltered = json.recordsFiltered;
          json.data = json.data;
          return JSON.stringify( json ); // return JSON string
        }
      }
  });

I also use Server-side processing..
Just to be clear, this error only prompts when I open the exported file.
Please guide me on this. Thanks.

Hello, I try to show 5 rows per page, but i can't.
I try :
pageLength: 5
lengthMenu: [[5, 10, 20, -1], [5, 10, 20, "Todos"]]
but don´t work.

I think that I need a extra function but I don´t know. Please help me. Thanks

It is possible
1. Only the selected rows will be shown on click.
2. Only Unselected rows will be shown on click.

datatable print not working chrome 61 version it working 60 version

I have a table that I want to sort by date, but it is not working.
follow the code.

``` if ( $.fn.dataTable.isDataTable( '#tableabertos' ) ) {
table = $('#tableabertos').DataTable();
table.destroy();
}
$(document).ready(function() {
$('#tableabertos').DataTable({

                    "order": [[7 , "desc" ]],
                    "lengthChange": false,
                    "columnDefs": [ {
                        "targets": 0,
                        "orderable": false,
                    } ]

                });
            } );

```

HTML

<thead> <tr> <th><input type="checkbox" id="all_coletados"/></th> <th>ATD.</th> <th>PAC</th> <th>CON</th> <th>SE</th> <th>AG</th> <th>SL</th> <th>CL</th> <th>ST</th> </tr> </thead> <tbody id="tbl_atendimentos_coletados"> <tr> <td style="text-align: center" scope="row"> <input type="checkbox" pac_nome="Test" atd_cod="199999" pac_sexo="M" dt_nasc="19/08/1932" pac_rg="321654" pac_fone="98762132" pac_carteira="32165465" atd_gih="321654" pac_cnv="ASDF" atd_dthr="13/12/2017 11:36:00" dthr="13/12/2017 15:25:10" id="321654"/> </td> <td style="text-align: center">123123</td> <td>TEST</td> <td>ASD</td> <td style="text-align: center"><img src="M.png" height="15px"></td> <td style="text-align: center">85</td> <td style="text-align: center">13/12/2017 11:36:00</td> <td style="text-align: center">13/12/2017 15:25:10</td> <td style="text-align: center; cursor: pointer;background-color: #ee8 !important; color: black !important;" onclick="openDetalhes( '1933145' )">COLETADO</td> </tr> </tbody> </table>~~~~

Hello there, i'm need some help with Date sorting. Cant sort date with DD/MM/YYYY mask.
Table header:

<table class="table table-striped table-responsive table-hover" id="apps" data-order='[[ 3, "dsc" ]]' data-page-length='25'>

Javascript:

<script type="text/javascript" src="<?=SITE_URL;?>js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="<?=SITE_URL;?>js/dataTables.bootstrap4.min.js"></script>
<script type="text/javascript" src="<?=SITE_URL;?>js/moment.js"></script>
<script type="text/javascript" src="<?=SITE_URL;?>js/datetime-moment.js"></script>
<script type="text/javascript" src="<?=SITE_URL;?>js/tables.js"></script>

tables.js:

$(document).ready(function(){
$.fn.dataTable.moment( 'DD/MM/YYYY' );
    $('#apps').DataTable( {
"columnDefs": [
        { "orderable": false, "targets": 0 },
        ],
            "language":{
    "sProcessing":   "Зачекайте...",
    "sLengthMenu":   "Показати _MENU_ ігор",
    "sZeroRecords":  "Записи відсутні.",
    "sInfo":         "Ігри з _START_ по _END_ із _TOTAL_ ігор",
    "sInfoEmpty":    "Записи з 0 по 0 із 0 записів",
    "sInfoFiltered": "(відфільтровано з _MAX_ записів)",
    "sInfoPostFix":  "",
    "sSearch":       "Пошук:",
    "sUrl":          "",
    "oPaginate": {
        "sFirst": "Перша",
        "sPrevious": "Попередня",
        "sNext": "Наступна",
        "sLast": "Остання"
    },
    "oAria": {
        "sSortAscending":  ": активувати для сортування стовпців за зростанням",
        "sSortDescending": ": активувати для сортування стовпців за спаданням"
    }}
        } );
});
$('body').tooltip({selector: '[data-toggle="tooltip"]'});

With ScrollY enabled, our table headers are misaligned (too narrow). We have multiple tables but only the first has correct alignment while the others do not. Clicking a table header (to sort by column) causes the header for that table to resize correctly.

I've seen related issues but cannot resolve, and another user reported a similar issue (and includes a functional example that demonstrates the problem) although they use a bootstrap modal. Click their modal to see what I see:

https://datatables.net//forums/discussion/37108

I also use bootstrap and think it's related. Disabling ScrollY solves the alignment problem.

Related settings: "scrollY": '50vh', "scrollX": true, "scrollCollapse": true,

Hi i have buttons to export my tables, but my tables does not show all the data from datatables, i would like export all the fields including the info no showed on the tables,how can i do that?

Hi

I have a problem with rendering a column. I need to convert my string into integer:

"columnDefs": [ {
"targets": 5,
"render": function ( data, type, row ) {
    return parseInt(data);
}

}],

The code works fine but I use dataTables to generate tables on multiple pages and for those pages where there are two columns, the whole table will not work. Is there a way I can make render work only for a table with a specific id? I have tried something like:

"columnDefs": [ {
"targets": 5,
"render": function ( data, type, row ) {
    if ( var table==='inventory_table' ) {
        return parseInt(data)};
     };

But it didn't work.

I am automatically hiding field 5, 7 when I click to enable both the search field does not come together how to solve this? thank you

My Code

$(document).ready(function() {

  var advance = $('#advanced-table').DataTable( {
  dom: 'Blfrtip',
       columnDefs: [
        {
            targets: 1,
            className: 'noVis',
        },
        {

            "targets": [ 5 ],
            "visible": false,
            "searchable": true,
        },
        {
            "targets": [ 7 ],
            "visible": false,
            "searchable": true,
        }

    ],
buttons: {
    name: 'primary',

    buttons: [ 'copy', 'csv', 'excel', 'pdf', 'print', 'colvis'  ]
},




      //"language": {
            //"url": "http://cdn.datatables.net/plug-ins/1.10.13/i18n/Portuguese-Brasil.json"
       // }


} );

$(document).ready(function() {
$('a.toggle-vis').on('click', function (e) {
e.preventDefault();

    // table
    var table = $('#advanced-table').dataTable();

    // column
    var ColNum = $(this).attr('data-column');

    // Define
    var bVis = table.fnSettings().aoColumns[ColNum].bVisible;

    // Toggle
    table.fnSetColumnVis(ColNum, bVis ? false : true);

});

});

// Setup - add a text input to each footer cell
$('#advanced-table tfoot th').each( function () {
var title = $(this).text();
$(this).html( '

' );
} );
// Apply the search
advance.columns().every( function () {
var that = this;

    $( 'input', this.footer() ).on( 'keyup change', function () {
        if ( that.search() !== this.value ) {
            that
                .search( this.value )
                .draw();
        }
    } );
} );



} );

I've created a DataTable which includes a column of 4-character identifiers for certain meteorological data collection stations. I have a database which includes a record for each individual station. For example, in my database station KPHL has name: "Philadelphia", state: "PA", country: "US", latitude: 39.87, longitude: -75.23, elevation: 18.

I would like for the user to be able to hover over a specific hyperlinked station ID in the table, which would then display the relevant information from the database in the tooltip window. So if a user hovers over the blue "KPHL" in my table, they see the following information in a tooltip window:

Station Name: PHILADELPHIA
State: PA
Country: US
Latitude: 39.87
Longitude: -75.23
Elevation: 18

I'd like to implement AJAX for this. Is there built-in functionality for tooltips in DataTables? Or will I have to use a separate jQuery event?

I am using table tools 2.1.5. and datatable 1.9.4. Buttons are visible but it is not click able. I have seen a lots of reference, but not getting why. I m using jboss server. When doing rclick on button, it is showing "movie not loaded". I checked flash settings in browser., All ok...But why it is not working.please help me

Any plans to support UIKit 3 as a theme?
Been using it for months even though it's "beta" and it's a very nice framework.

I have it looking like the table options in 3 right now by CSS and jQuery
Would be great to have it official supported
Thanks

Hello,

I've a table for which I'm using DataTable.

This table has input fields inside each row. This is the current view of the table without DataTable:

However, when DataTable is added:

@section scripts{

    <script>
            $(document).ready(function () {
                $("#contadores").DataTable({
                    stateSave: true
                });
            });
    </script>
}

The table resizes becoming wider:

I would like to know how to resize this columns. I've tried with this: https://datatables.net/reference/option/columns.width

@section scripts{

    <script>
            $(document).ready(function () {
                $("#contadores").DataTable({
                    stateSave: true,
                    "columnDefs": [
                        { "width": "20%", "targets": 4 }
                    ]
                });
            });
    </script>
}

But there are no changes.

Thanks!