Hi
I've googled this to oblivion and just can't get the datatable to align when it initialises ... it is in a bootstrap div panel within a bootstrap modal ... works like a dream after you touch the header to sort or enter a character in the search box ... is there a way to focus input into the search box on initialization? Anyone out there who as used fixedHeader in a modal ... I tried xScroll: "100%" ... but, the the header disconnects and I get sideways scrolling ... need the header fixed ... any ideas?

I have a server side datatable defined that has a control in the first column to show/hide child records for the main record using ajax calls to the server to return child details ... Works very nicely ... Now, what I am trying to do is to "grey out" or "hide" the control where there are no child records for a main record. Is there a way of doing this?

Hi experts, I am kinda new to the DataTables, and I am using it for a table that has its cells colored differently based on the data that they hold. I am making use of the Buttons extension to export the table into xls and pdf. I have been able to export table's textual data successfully, however, the cell colors do not reflect when they are exported. I tried searching a solution for this in the documentation, but ended up getting nothing. Is there a way to achieve this with datatables, if there is one, then how? please help me guys. Thanks in advance :)

Hello! How would I go about adding a background color using the customize function to add a background color if the cell in the table meets the requirements? For example, a column called **replay **has values of "Approved", "Overturned", and "Check Supervisor". Approved => Green, Overturned => Yellow, Check Supervisor => Blue.

https://datatables.net/reference/event/button-action

1) Why did you choose to have the .dt namespace as a suffix? I guess it is little counterintuitive.
2) Some of the examples do not include .dt namespace

Thanks

Please, after loading the table, I wish to select a row of known DT_RowId. How to implement this?

OT: But, please add filter to the web-site searches, so that we could filter say forum entries from sample entries.

Hello everyone,

I've searched hours and hours to solve this issue and I didn't find anything very helpful beside fully rewriting my code...
So... Hopefully you can help me with my issue.

I am retrieving data from an external Web Services with complexes types and I have to display them in a table.
Before using DataTables, what I did was build up my rows using jQuery syntax like:

var instance_row = $('<tr>')
    .attr("row_id", instance.InstanceId)
    .append($('<td>').attr("class","td_name")
            .append($('<input>')
                    .attr("id", "instance_name_"+instance.InstanceId)
                    .attr("type", "text") ...

I've added the DataTable using:

dataTable = $('#ec2_instances').DataTable({
                columnDefs: [
                     { "type": "html-input", "targets": [0, 5] },
                     { "orderable": false, "targets": [6] }
                  ],
                  bDestroy: true
              });

Now, it works just fine... But here is the trick (finally !):

I want to be able to toggle edit mode on my rows. Meaning: When clicking on an icon, I want to be able to edit the row and save it.
That works just fine. But when I refresh the table or when I change the page, the edit mode is still on !! But the data in my input text has the new value.

Here is a video that shows the issue:
https://www.youtube.com/watch?v=tVFg310woIQ

Any help would be appreciated.

Thanks

Philippe

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>';
                    }
                },

`

Hi I tried this feature:
datatables.net/release-datatables/examples/api/multi_filter_select.html

But this is for single value selection from each column. I want to implement multi value selection column filter, so when we select multi values from same column filter dropdown, will get data related to selected values from dropdown list.
My jsFiddle is:https://jsfiddle.net/prats1251/vf3c3sn4/
Thanks.

Hello

Im using datatables for displaying data on the webpage. Have also added and Export button which would export the data in Excel format.
There are around 10k records that would be displayed /filtered. The export to excel doesnt work when tried from IE11 however the same works from Chrome (Version 42.0.2311.13).
Can you advise if this is a known issue and is there any fix for it.

Code snippet from js file:

var table = $('.tableContent').DataTable({
    "autoWidth": false,
    "pageLength": 50,
    dom : 'lBfrtip',
    buttons : [ {
        extend : 'excel',
        text : 'Export to Excel',
        exportOptions : {
            modifier : {
                // DataTables core
                order : 'index',  // 'current', 'applied', 'index',  'original'
                page : 'all',      // 'all',     'current'
                search : 'none'     // 'none',    'applied', 'removed'
            }
        }
    } ],
    "columnDefs" : [{
        "targets" : [ 0, 1, 2, 8, 9, 10, 11,  17, 18 ],
        "visible" : true,
        "searchable" : true
    }, {
        "targets" : [ 3, 4, 5, 6, 7, 12, 13, 14, 15, 16, 19, 20, 21 ],
        "visible" : false,
        "searchable" : false
    }]
});

I'm using Laravel and Datatable with Yajra. Fetching the data server-side.

The code is working on windows and android devices but not on IOS devices.

var table_all = $('#loans-table-all').DataTable({
processing: true,
serverSide: true,
iDisplayLength: 100,

            ajax: location.protocol+'/active-loans-ajax-all',
            "columnDefs": [
                { className: "text-right", "targets": [ 5,6,7,8,9,10,11,12 ] },
                { className: "text-center", "targets": [ 1 ] }
            ],
            columns: [
                {data: 'loan_acct_no', name: 'loan_acct_no'},
                {data: 'option', sortable:false},
                {data: 'lname',name:'lname', visible: false},
                {data: 'fname',name:'fname', visible: false},
                {data: 'mname',name:'mname', visible: false},
                {data: 'complete_name',name:'lname'},
                {data: 'branch_name', name: 'branch_name'},
                 {data: 'area_name',name:'area_name'},
                {data: 'loan_amount', name: 'loan_amount'},
                {data: 'total_payable', name: 'total_payable'},
                {data: 'daily', searchable:false},
                {data: 'rem_balance', name: 'rem_balance'},
                {data: 'date_due',name: 'date_due'}
            ]
        });

hey guys i have a DT which data is processed in the server side using the default server_processing.php file.
how can i add a button in the last column.

this is my columns array
$columns = array(
array( 'db' => 'id', 'dt' => 0 ),
array( 'db' => 'name', 'dt' => 1 ),
array(
'db' => 'date',
'dt' => 2,
'formatter' => function( $d, $row ) {
return date( 'D, d/m/Y', strtotime($d));
}
)
);

thanks

Hi guys,
To be able to use a new feature of dataTables (Expandable table rows like in this example ). I need to upgrade from version 1.10.0-dev to 1.10.13

My problem is that after the migration My tables do not initialize correctly (They simply do not show most of the columns, and any user interaction results in error in Javascript console). Do you have any migration guide?

I am trying to export and print multiple headers in datatables.but it is exporting only onw row.how to export multiple header rows

Hello,

I would like to try to integrate column filters (select) above the header with fixedColumns. Can you please guide me on how to do this? I tried to create a test case in jsfiddle however rendering seems to be weird. Anyway, link to jsfiddle is this

https://jsfiddle.net/LeMont_80/uwv4tbcp/

Or if this is already a duplicate questions, please point me to that answered question.

Thanks a lot

Hi all,

i have a problem with one of my tables. It has joined data on an oracle-db, when trying to edit a row or insert a new one.

Here are my codes:

PHP

<?php

/*
 * Editor server script for DB table STG_TAB_ARTIKEL
 * Created by http://editor.datatables.net/generator
 */

// DataTables PHP library and database connection
include( "lib/DataTables.php" );

// Alias Editor classes so they are easy to use
use
    DataTables\Editor,
    DataTables\Editor\Field,
    DataTables\Editor\Format,
    DataTables\Editor\Mjoin,
    DataTables\Editor\Options,
    DataTables\Editor\Upload,
    DataTables\Editor\Validate;


    // Build our Editor instance and process the data coming from _POST
    Editor::inst( $db, 'STG_TAB_ARTIKEL a', 'a.PK_ARTIKEL_ID' )
        ->debug(true)
        ->fields(
            Field::inst( 'a.ARTNR' )
                ->validator( 'Validate::unique' )
                ->validator( 'Validate::required' )
                ->validator( 'Validate::numeric' ),
            Field::inst( 'a.FK_STG_TAB_ARTKAT' )
                ->options( Options::inst()
                    ->table( 'STG_TAB_ARTIKELKATEGORIE' )
                    ->value( 'ARTKATNR' )
                    ->label( 'ARTKAT' )
                )
                ->validator( 'Validate::dbValues' ),
            Field::inst( 'a.ARTBEZ' )
                ->validator( 'Validate::notEmpty' ),
            Field::inst( 'a.ARTMAß' ),
            Field::inst( 'ak.ARTKAT' )
        )
        ->leftJoin( 'STG_TAB_ARTIKELKATEGORIE ak', 'ak.ARTKATNR', '=', 'a.FK_STG_TAB_ARTKAT')
        ->process( $_POST )
        ->json();

?>

JS

/*
 * Editor client script for DB table STG_TAB_KUNDEN
 * Created by http://editor.datatables.net/generator
 */

(function($){

$(document).ready(function() {
    var editor = new $.fn.dataTable.Editor( {
        ajax: 'sources/table.STG_TAB_ARTIKEL.php',
        table: '#STG_TAB_ARTIKEL',
        fields: [
            {
                "label": "Artikel:",
                "name": "a.ARTNR"

            },
            {
                "label": "Artikelkategorie:",
                "name": "a.FK_STG_TAB_ARTKAT",
                "type": "select",
                "placeholder" :  "Bitte Kategorie auswählen.."
            },
            {
                "label": "Bezeichnung:",
                "name": "a.ARTBEZ"
            },
            {
                "label": "Maße:",
                "name": "a.ARTMAß"
            }
        ]
    } );


    var table = $('#STG_TAB_ARTIKEL').DataTable( {
        dom: 'Bfrtip',
        ajax: 'sources/table.STG_TAB_ARTIKEL.php',
                serverSide: true,
        scrollY:        '70vh',
        scrollCollapse: true,
        paging:         false,
        cache: true,
        columns: [
            {
                "data": "a.ARTNR"
            },
            {
                "data": "ak.ARTKAT"
            },
            {
                "data": "a.ARTBEZ"
            },
            {
                "data": "a.ARTMAß"
            }
        ],
        select: "single",
        lengthChange: false,
        buttons: [
            { extend: 'create', editor: editor }
            ,{ extend: 'edit',   editor: editor }
        ]
    } );
} );

}(jQuery));

On debbuging the data-Header seems correct:

data[row_5760][a][ARTNR]:-2
data[row_5760][a][FK_STG_TAB_ARTKAT]:23
data[row_5760][a][ARTBEZ]:HTV - Einweg
data[row_5760][a][ARTMAß]:0x0

But on the debugSql-array on Preview Page doesn't start an update:
(see attachment) [2]query: SELECT a.PK_ARTIKEL_ID as "a.PK_ARTIKEL_ID", a.ARTNR as "a.ARTNR", a.FK_STG_TAB_ARTKAT as "a.FK_STG_TAB_ARTKAT", a.ARTBEZ as "a.ARTBEZ", a.ARTMAß as "a.ARTMAß", ak.ARTKAT as "ak.ARTKAT" FROM STG_TAB_ARTIKEL a LEFT JOIN STG_TAB_ARTIKELKATEGORIE ak ON ak.ARTKATNR = a.FK_STG_TAB_ARTKAT WHERE a.PK_ARTIKEL_ID = :where_0

Don't know why it isn't working, i have another table w/o the leftJoin() param which is working perfectly.

Looking forward to any help!
Thanks in advance

Br Toni

Hi guy's,

I've created an "extension" to the datatables to project my needs.
It basically consists on a box with many types of filters. Multi checkbox's that are added to a regex string for search purposes, many types of calculations depending on the type of data to check if it's null, bigger than etc to add the result to the regex string and the possibility of having an external filtering data coming from multiple charts. Basicly I'm getting the current data saved at the local storage and editing the search string's from the correct columns.

All this seems pretty "doable", except a problem I'm having.

When loading the chart from the local storage - as explained in the manual from here - it comes everything correct but I can't access in any way to the cache from the search, so that I can create the filtering system.

From what I've understood, when doing:
table.column(table.colReorder.transpose(colIdx)).cache('search').unique().sort().each(function (d) {

The unique() and sort() would "emulate" a change to the datatable, so there should always be cache at the search.
Isn't this the main purpose, like it's explained on the manual?

Thank you all.

Goodmorning everyone. I'm doing some tests with datatable inserted in asp.net MVC and everything ok. But the selection of the row does not appear. I tested more examples of the manual , bat nothing works the rows wasn't selectable.

Thanks for your help.
Luca

Include this code:

            bundles.Add(new ScriptBundle("~/bundles/datatable").Include(
                            "~/Content/DataTables-1.10.13/media/js/jquery.dataTables.min.js",
                            "~/Content/DataTables-1.10.13/select/1.2.1/js/dataTables.select.min.js",
                            "~/Content/DataTables-1.10.13/keytable/2.2.0/js/dataTables.keyTable.min.js",
                            "~/Content/DataTables-1.10.13/media/js/dataTables.bootstrap.min.js",
                            "~/Content/DataTables-1.10.13/extensions/Buttons/js/dataTables.buttons.min.js",
                            "~/Content/DataTables-1.10.13/extensions/Buttons/js/buttons.bootstrap.min.js",
                            "~/Content/jszip/jszip.min.js",
                            "~/Content/pdfmake/0.1.18/build/pdfmake.min.js",
                            "~/Content/pdfmake/0.1.18/build/vfs_fonts.js",
                            "~/Content/DataTables-1.10.13/extensions/Buttons/js/buttons.html5.min.js",
                            "~/Content/DataTables-1.10.13/extensions/Buttons/js/buttons.print.min.js",
                            "~/Content/DataTables-1.10.13/extensions/Buttons/js/buttons.colVis.min.js"
                            ));

         bundles.Add(new StyleBundle("~/Content/css").Include(
                   "~/Content/bootstrap.css",
                   "~/Content/site.css",
                   "~/Content/iconsCastom.css",
                   "~/Content/DataTables-1.10.13/media/css/jquery.dataTables.min.css"));

view:

<div style="width:90%; margin:0 auto;">
    <table id="myTable">

        <thead>
            <tr>
                <th>
                    @Html.DisplayNameFor(model => model.Name)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Note)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Plate)
                </th>
                <th>
                    @Html.DisplayNameFor(model => model.Model)
                </th>


            </tr>
        </thead>

</table>
</div>
        <style>
            tr.even {
                background-color:#00FF99 !important;
            }
        </style>
        @* Load datatable css *@
           <script>
               $(document).ready(function () {

                    $('#myTable').DataTable({
                        //"processing": true,
                        //"serverSide": true,
                        "ajax": {
                            "url": "/Vehicles/loaddata",
                            "type": "GET",
                            "datatype": "json"
                        },
                        select: true,

                        "columns": [
                                { "data": "Name", "autoWidth": true },
                                { "data": "Note", "autoWidth": true, visible: false },
                                { "data": "Plate", "autoWidth": true, visible: false },
                                { "data": "Model", "autoWidth": true }
                        ]
                    });

                    table.rows({ selected: true });
                    table.columns({ selected: true });
                    table.cells({ selected: true });
                });
            </script>

I am using the editor inline and disabling the editor if the user doesn't have edit permissions however, although the field is disabled if the user clicks into it then clicks away the form submits. I have turned on onBlur submit but i would have thought this should not happen if the editor is disabled.

 editor = new $.fn.dataTable.Editor({
        ajax: { ... },
        table: "#table",
        idSrc: "Id",
        fields: [...        ],
        formOptions: { inline: { onBlur: "submit", submit: "all" } }
    });

    editor.on("preSubmit", function(e, d, action) {
        $.each(d.data, function(key, vals) { $.extend(d, vals); });
        delete d.data;
        d = JSON.stringify(d);
    });

    $("#table").on("key-focus", function(e, datatable, cell) {
        editor.inline(cell.index());
    });

I have a serverSide table ('#my_customers_table') with scrollY: "300px" and scroller: true.
Each row has a cell that opens a modal, and after changing some values there I need to redraw the table (showing the changes), and scrolling to the row that was changed.
Scrolling goes to correct place with:
$('#my_customers_table tbody').on( 'click', 'tr', function () {
localStorage.setItem('my_user_table_selectedrow',$(this).index());
});
and
fnDrawCallback: function() {
my_userTable.row(parseInt(localStorage.getItem('my_user_table_selectedrow'))).scrollTo();
});

But there's a problem that some rows have a lot of text that I need to wrap, unless I want table 5000+ px wide, so I added
div.DTS tbody th, div.DTS tbody td {
white-space: normal !important;
}

After that, scrollTo scrolls to (I presume) the place where the row would be if it were not wrapped, i.e in a very wrong place far above the correct one.

Is there a way for scrollTo to take account the height of each row and calculate the correct scrolling poinnt?