Hi, I'm working on an application that uses a datatable. I'm trying to get the displayed "Processing..." message that occurs when the table is loading more data to appear in front of the datatable, which normally works fine and looks like this

However, after I enable scrollX: true, the message becomes obscured behind the table like this

Any idea about what is going on? I want to have X scrolling enabled an have the processing message shown over top of the table

Here is the code for my datatable

    $('#my-table').dataTable({
        "order": [[2, "desc"]],
        buttons: [
        'print',
        'copyHtml5',
       ]
        dom: 'Bfrtip',
        searching: false,
        serverSide: true,
        processing: true,
        scrollX: true,
        type: "POST"
    });

Hi,
How can I remove the DTE_Header from the Editor window?

Thanks,
Thomas

@section pagespecific {

I want to make my search box work in datatable same like datatable search box How I do this.
please answer.thanks

Hi team,

I'm working on a dashboard interface with dataTable in ajax. I created a form with a select list to select the columns (80+ columns) what you want to show.
The PHP ajax check the columns to show, the rights on the columns and the xhr ajax return dataTable datas and the columns to show/hide.
The ajax call response in 370ms (50 rows) but the draw of table is during 4/5s. I desactivated my each on the visibility and the draw of table is instant.

Does the visible function have performance issues? I created this exemple on jsFiddle: https://jsfiddle.net/m45gy64c/5/ to show the problem.

Hi,

All my Yadcf filters are in a collapsable box.
When the box is collapsed we don't see if there are filters set.
So I'm looking for a way to display a warning on the page if any filters is applied by Yadcf.

The only way I see is to get info from localstorage but this is complicated to parse...

Any other way to do it?

Thanks

Hi,

i am binding the table using callback by using UpdatePanel.
Once my button click code behind runs completely, i call a script on aspx page using Scriptmanager.ClientScriptblock()...
and in the called java script function i append rows to DataTable.
On first load it adds the checkboxes as first column. but in second time they are not visible and will be shown only when i sort the table. Can some please help.

i am appneding rows to tbody as follows
$("#bodyListLetter tr").remove(); // first removing tr and then add.
$('#bodyListLetter').append(Rows);

Table initialisation code.

if ($.fn.dataTable.isDataTable('#example2')) {
table = $('#example2').DataTable();
}
else {
$('#example2').DataTable({
"searching": false,
"retrieve": false,
"paging": false,
"ordering": true,
"info": false,

                columnDefs: [{
                    orderable: false,
                    className: 'select-checkbox',
                    targets: 0
                }],
                select: {
                    style: 'os',
                    selector: 'td:first-child'
                },
                order: [[1, 'asc']]
            });
        }

Does/Can Editor work with Froala WYSIWYG? If so how?

Hello.
Please, review this line, because the alignment is set to middle. You don't need this property. I removed then and I tested in IE, FF & Chrome and all are Ok.

Que tal, espero explicarme correctamente:

Tengo una tabla donde renderizo en la primera columna elementos checkbox, el problema es que al seleccionar algunos, por ejemplo de la primera pagina, al pasar a la siguiente pagina, estos se deseleccionan.
Mi paginacion va de 10 en 10 y utilizo pipeline para cargar de 20 registros en cache,
yo encuentro que el problema es que al cambiar, reordenar, la tabla es completamente redibujada (draw), y por eso no se mantiene mi seleccion.

Espero puedan ayudarme!
Agradezco de antemano su atención.

Dejo un breve fragmento de como obtengo mis columnas, mi forma dinamica por tabla
[code]
var getComlumns = function(str){
switch(str){
case 'columns_group_participants':
return [
{
orderable: false,
className: "custom-width",
data: "serviceid",
render: function ( data, type, row ) {
return "

'"+ "

";
},
"targets": 0
},
...
...
[code]

Hello,

As I've said in previous questions, I enjoy using DataTables. I was wondering if by any chance there's a plan in the works to come out with an extension that allows for resizing of the columns by the user by dragging the edges of the column headers (like in Excel)?

Thanks,
Joe

Hello,

I would like to use vh units with scrollY in order for my datatable to fill up the screen regardless of the user's screen size. However, when I try this, I get a strange result upon the very first load (I am using server-side processing, and the data immediately loads upon page load). Specifically, the data only fills up to about halfway down the table, and then no more rows are loaded. But I know for a fact that hundreds of rows should be loading, and therefore the visible table should be completely filled with data (it works properly when I use px units for scrollY). But then, upon subsequent data loads, the data populates the table fully, as expected.

Here is my datatable code:

    var dtRecords = $('#tblRecords')
        .on('error.dt', function (e, settings, techNote, message) {
            console.log('An error.dt event has occurred.');
            try {
                throw (new Error(message));
            }
            catch (err) {
                HandleError(true, 'From error.dt: ' + err.stack);
            }
            finally {
                return false;
            }
        })
        .DataTable({
            dom: 'BtSir',
            serverSide: true,
            ajax: {
                url: "MktSegIndService1.asmx/LoadRecords",
                type: "POST",
                dataType: "json",
                data: function(d){
                    d.isTextSearch = isTextSearch;
                },
                error: function (xhr, status, error) {
                    HandleError(false, 'From DataTables AJAX error section: ' + error);
                }
            },
            columns: [
                { data: "ORIGINAL", className: "colOrig" },
                { data: "CHILD" },
                { data: "MarketSegment", className: "mktSeg" },
                { data: "SIC", className: "sic" },
                { data: "PARENT" },
                { data: "ULTIMATE" },
                { data: "State" },
                { data: "Country" },
            ],
            keys: {
                blurable: false
            },
            buttons: {
                buttons: [
                    {
                        text: 'Copy',
                        key: {
                            key: 'c',
                            ctrlKey: true
                        },
                        action: function (e, dt, node, config) {
                            console.log('copy action!');
                            try{
                                var copiedCell = dt.cell({ row: focusedRowIdx, column: focusedColIdx });
                                copiedCellData = copiedCell.data();
                            }
                            catch (err){
                                HandleError(true, "From Copy action: " + err.stack);
                            }
                        }
                    },
                    {
                        text: 'Paste',
                        key: {
                            key: 'v',
                            ctrlKey: true
                        },
                        action: function (e, dt, node, config) {
                            console.log('paste action!');
                            try{
                                var field = dt.column(focusedColIdx).dataSrc();
                                if (field === "MarketSegment" || field === "SIC") {
                                    alert("CopiedCellData = " + copiedCellData);
                                    editorObj
                                        .edit(focusedRowIdx, false)
                                        .set(field, copiedCellData)
                                        .submit();
                                } else return false;
                            } catch (err) {
                                HandleError(true, "From Paste action: " + err.stack);
                            }
                        }
                    }
                ]
            },
            scroller: {
                displayBuffer: 15
                ,
                loadingIndicator: true
            },
            //deferRender: true, // Don't need this with server-side processing
            colReorder: {
                realtime: false
            },
            scrollX: true,
            scrollY: "80vh",
            scrollCollapse: true,
            searching: false,
            ordering: false,
            processing: false,
            info: false,
            rowId: "Row",
            select: true
        });

Works just fine if number of rows is 2+.
If number of rows is 1, column totals are correct, but " bigTotal " is wrong...instead of $45.00, I get $4,500.00

    "footerCallback": function ( row, data, start, end, display ) {
        var api = this.api(), data;
        var bigTotal = 0;
        // 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
        totalCash = api
            .column( 2 )
            .data()
            .reduce( function (a, b) {
                return intVal(a) + intVal(b);
            } );
            bigTotal = bigTotal + totalCash;
        totalCash = Number(totalCash).toLocaleString("en-US", {style:"currency", currency:"USD", minimumFractionDigits: 2});

        totalCheck = api
            .column( 3 )
            .data()
            .reduce( function (a, b) {
                return intVal(a) + intVal(b);
            } );
           bigTotal = bigTotal + totalCheck;
        totalCheck = Number(totalCheck).toLocaleString("en-US", {style:"currency", currency:"USD", minimumFractionDigits: 2});

        totalCredit = api
            .column( 5 )
            .data()
            .reduce( function (a, b) {
                return intVal(a) + intVal(b);
            } );
        bigTotal = bigTotal + totalCredit;
        totalCredit = Number(totalCredit).toLocaleString("en-US", {style:"currency", currency:"USD", minimumFractionDigits: 2});

        totalPaypal = api
            .column( 6 )
            .data()
            .reduce( function (a, b) {
                return intVal(a) + intVal(b);
           } );
        bigTotal = bigTotal + totalPaypal;
        totalPaypal = Number(totalPaypal).toLocaleString("en-US", {style:"currency", currency:"USD", minimumFractionDigits: 2});

        //DIVs inside footer th
        $("#totalCash").text("    " + totalCash);
        $("#totalCheck").text("    " + totalCheck);
        $("#totalCredit").text("    " + totalCredit);
        $("#totalPaypal").text("    " + totalPaypal);
        bigTotal = Number(bigTotal).toLocaleString("en-US", {style:"currency", currency:"USD", minimumFractionDigits: 2});
        $("#bigTotal").text("    " + bigTotal);
    }

Hello Allan,
I have a use case where the user should be able to add more fields to a form when he clicks a button shown on the form itself,

but there is no field type : button ... can u please help me figure this out.. is there a way to achieve that . ??

hello alan,

can i get these type of features in my dataTables for each row as shown in below image..

regards
karthik.r

I am working on a mvc project. i am using datatable with jquery.I use ajax for saving and binding datatable . I have created controls like Textbox and dropdown , on the basis of which the datatable is loading.the record are correctly showing but Pdf,excel etc button are exporting old data every time ,So i cannot get the desired results

HI.
First DataTables is awsome and works great and fast but i have a strange problem using server processing im getting double ajax request with draw: 1 and draw: 2 parameters. The page that contains DataTables is loaded with ajax. The page contains 4 tables separated in bootstrap tabs. I also use one search field to search in all the tables.When searching everything is fine im getting only 4 ajax requests, only when loading the page im getting 8 double ajax requests.

here is the code for one table. All other tables are the same with different ajax data

$(document).ready(function () {


    $('#isprati tbody').unbind();

    var pocdatum = $('#pocdatum').val();
    var krajdatum = $('#krajdatum').val();

    var selectedUsluga = ($('input[name="usluga"]:checked').serialize());
    var selectedTip = ($('input[name="tip"]:checked').serialize());
    if ($.fn.DataTable.isDataTable("#isprati")) {
        $('#isprati').DataTable().clear().destroy();
    }
    var table1 = $('#isprati').DataTable({
        responsive: {
            details: {
                type: 'column'
            }
        },
        //deferRender: true,
        //pageResize: true,

        autoWidth: false,
        // "processing": true,
        "serverSide": true,
        "order": [[8, "asc"]],
        scrollY: '34vh',
        scrollCollapse: true,
        "pageLength": 100,
        "ajax": {
            url: "/admin/src/nalozi.src.php", // json datasource
            type: "post",  // method  , by default get
            data: {
                type: 1,
                checkUsluga: selectedUsluga,
                checkTip: selectedTip,
                nalogType: 'Да се испрати екипа',
                enddate: krajdatum,
                startdate: pocdatum
            }
        },
        columns: [
            {"data": null, "defaultContent": "", className: 'control', orderable: false, targets: 0},
            {"data": "1", targets: 1},
            {"data": "2", targets: 2},
            {"data": "3", targets: 3},
            {"data": "4", targets: 4},
            {"data": "5", targets: 5},
            {"data": "6", targets: 6},
            {"data": "7", targets: 7, className: 'none'},
            {"data": "8", targets: 8}
        ],
        buttons: [{
            text: 'Прати Екипа',
            className: 'btn btn-success btn-xs',
            action: function (e, dt, node, config) {
                var data = table1.rows('.selected').data().toArray();
                var newarray = [];
                for (var i = 0; i < data.length; i++) {
                    newarray.push(data[i][1]);
                }

                var sData = newarray.join();
                $.ajax({
                    type: 'post',
                    url: '/admin/src/nalogDetail.src.php',
                    data: {
                        nid: data[0]
                    },
                    success: function (data) {
                        $("#nbody").html('');
                        $("#nbody").html(data);
                        $("#nnaslo").html('');
                        $("#nnaslo").html('<button type="button" class="close" data-dismiss="modal">&times;</button><h5 id="nalogIDbr" data-id="' + nid + '" class="modal-title">Детали за налог бр: ' + nid + '</h5>');
                        $('#nalog-detail').modal("show");
                    }
                })

            },
            init: function (api, node, config) {
                $(node).removeClass('dt-button');
                $(node).removeClass('btn-default');
                $(node).addClass('pratiEkipa');
            }
        }],
        dom: 'B' +
        '<<"row"><"col-md-12"rt>>' +
        '<<"row"><"col-md-3"i><"col-md-9"p>>',
        "infoCallback": function (settings, start, end, max, total, pre) {
            return "Резултати: " + total;
        },
        "fnRowCallback": function (nRow, aData, iDisplayIndex, iDisplayIndexFull) {
            // Bold the grade for all 'A' grade browsers
            if (aData[6] === "Интернет") {
                $('td:eq(6)', nRow).html('<span class="label label-danger" style="font-size: 12px;">Интернет</span>');
            }
            if (aData[6] === "Телевизија") {
                $('td:eq(6)', nRow).html('<span class="label label-primary" style="font-size: 12px;">Телевизија</span>');
            }
            if (aData[6] === "Телефонија") {
                $('td:eq(6)', nRow).html('<span class="label label-info" style="font-size: 12px;">Телефонија</span>');
            }
            if (aData[6] === "Дигитална") {
                $('td:eq(6)', nRow).html('<span class="label label-success" style="font-size: 12px;">Дигитална</span>');
            }
            if (aData[6] === "Инфо Центар") {
                $('td:eq(6)', nRow).html('<span class="label label-default" style="font-size: 12px;">Инфо центар</span>');
            }
            if (aData[6] === "Канцеларија 4") {
                $('td:eq(6)', nRow).html('<span class="label label-default" style="font-size: 12px;">Канцеларија 4</span>');
            }
            if (aData[6] === "Канцеларија 5") {
                $('td:eq(6)', nRow).html('<span class="label label-default" style="font-size: 12px;">Канцеларија 5</span>');
            }
            if (aData[6] === "Канцеларија 6") {
                $('td:eq(6)', nRow).html('<span class="label label-default" style="font-size: 12px;">Канцеларија 6</span>');
            }
            if (aData[6] === "Канцеларија 7") {
                $('td:eq(6)', nRow).html('<span class="label label-default" style="font-size: 12px;">Канцеларија 7</span>');
            }
            if (aData[6] === "Канцеларија 8") {
                $('td:eq(6)', nRow).html('<span class="label label-default" style="font-size: 12px;">Канцеларија 8</span>');
            }
            if (aData[6] === "Наплатен центар") {
                $('td:eq(6)', nRow).html('<span class="label label-default" style="font-size: 12px;">Наплатен центар</span>');
            }
            if (aData[6] === "Шефови на екипи") {
                $('td:eq(6)', nRow).html('<span class="label label-default" style="font-size: 12px;">Шефови на екипи</span>');
            }


            if (aData[5] === "Дефект") {
                $('td:eq(5)', nRow).html('<span class="label label-danger" style="font-size: 12px;">Дефект</span>');
            }
            if (aData[5] === "Нов приклучок") {
                $('td:eq(5)', nRow).html('<span class="label label-primary" style="font-size: 12px;">Нов приклучок</span>');
            }
            if (aData[5] === "Исклучување") {
                $('td:eq(5)', nRow).html('<span class="label label-success" style="font-size: 12px;">Исклучување</span>');
            }
        },
        "language": {
            "sProcessing": "Процесирање...",
            "sLengthMenu": "_MENU_ записи",
            "sZeroRecords": "Не се пронајдени записи",
            "sEmptyTable": "Нема податоци во табелата",
            "sLoadingRecords": "Вчитување...",
            "sInfo": "_START_ до _END_ од _TOTAL_ записи",
            "sInfoEmpty": "0 до 0 од 0 записи",
            "sInfoFiltered": "(Вкупно _MAX_ записи)",
            "sInfoPostFix": "",
            "sSearch": "Барај",
            "sUrl": "",
            "oPaginate": {
                "sFirst": "Почетна",
                "sPrevious": "Претходна",
                "sNext": "Следна",
                "sLast": "Последна"
            }
        }
    });


    $("#tab_filter").unbind();
    $("#tab_filter").keyup(function (e) {
        if (e.keyCode === 13) {
            table1.search(this.value).draw();

        }
    });

    $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        $($.fn.dataTable.tables(true)).DataTable().columns.adjust().responsive.recalc();
    });


    $('#isprati tbody').on('click', 'tr', function () {
        $(this).toggleClass('selected');
    });
    $('#isprati tbody').off('dblclick');

    $('#isprati tbody').on('dblclick', 'tr', function () {
        $('#nalog-detail').unbind();
        var data = table1.row(this).data();
        var nid = data[1];

        $.ajax({
            type: 'post',
            url: '/admin/src/nalogDetail.src.php',
            data: {
                nid: nid,
                allowed: 1
            },
            success: function (data) {
                $("#nbody").html('');
                $("#nbody").html(data);
                $("#nnaslo").html('');
                $("#nnaslo").html('<button type="button" class="close" data-dismiss="modal">&times;</button><h5 id="nalogIDbr" data-id="' + nid + '" class="modal-title">Детали за налог бр: ' + nid + '</h5>');
                $('#nalog-detail').modal("show");
            }
        })
    });

When using a Natural Key such as an email address, the editor sends the data ok:

{
    action:"edit"
    data:{name@oldaddress.com:
        {user_ID: "999999999", email_ID: "name@newaddress.com"}
    }
}

The server updates the the email address and responds to the client with:

{
    data: [
        {email_ID: "name@newaddress.com", odr: "1", dft: "0", verified: "1"}
    ]
}

All good so far.

HOWEVER, when parsing the returned data, datatables issues the following error:

datatables.min.js:14 Uncaught Error: Syntax error, unrecognized expression: #name@oldaddress.com

Testing:

If the email address has a backslash inserted before the @, then the error goes away so:

name\@oldaddress.com - CAN BE UPDATED FINE
name@oldaddress.com - THROWS ERROR IN THE CLIENT

Is the solution to this to have Datatables escape the '@' symbol?

Hi Allan -

Newbie question I'm afraid.

I have a table of customer enquiries that I receive via a WordPress site that are stored in a mySQL table. I have successfully set up Editor to perform basic editing of the table and that works absolutely fine. I would, however, like to hide the Create button at table initialisation so that it is not visible by default (I just want my user to either process the enquiry or delete it but not create new ones).

I'm sure there will be a way to do this but I'm struggling to find the method. Any help appreciated.

Hello Alan.
I need your help to connect two tables together using the same generator Id.
For example, one employee has certain generator Id and when he/she starts to create a new row of the table, this row will have the same generator id connect this employee and his rows.
When I want to open this form it should show me only his/her rows that connect to his/her form. The Database will store all rows from employees. I try to figured it for couple weeks already and I am stuck on it. Please give me idea what do I need to use here to resolve this issue.
I tried to use in Controller table "Where" statement but it didn't work.
There are my code for Table js:

(function($){

$(document).ready(function() {
var editor = new $.fn.dataTable.Editor( {
ajax: '/api/Table',
table: '#Table',
fields: [
{
"label": "GeneratorID:",
"name": "generatorid",
"className": "formidne"

        },
        {
            "label": "MATExample#:",
            "name": "mate_example"
        },
        {
            "label": "Description:",
            "name": "description",
            "type": "textarea"
        },
        {
            "label": "Example2",
            "name": "example2"
        },
        {
            "label": "Example3:",
            "name": "example3"
        },
        {
            "label": "Example4",
            "name": "example4"
        }
    ]

});

editor.on('open', function () {

    var id1 = $("#thisid").val();
    var id2 = $("#thisid2").val();
    if (id1 != "") {
        var id = $("#thisid").val();


    }
    else {
        var id = $("#thisid2").val();

    }

    $("#DTE_Field_generatorid").val(id);
    $(".formidne").hide();



});

var table = $('#Table').DataTable({
    columnDefs:[
       {visible:false,targets:0}
    ],
    dom: 'Bfrtip',
    ajax: {
        url: '/api/Table',
        type:"post",
        data: {"generatorid": formId}
         data:function(data){
           data.generatorid = $("#thisid2").val();
            var formId = data.generatorid;


         }

},

    columns: [
        {
            "data": "generatorid"

        },
        {
            "data": "mate_example"
        },
        {
            "data": "description"
        },
        {
            "data": "example2"
        },
        {
            "data": "example3"
        },
        {
            "data": "example4"
        }
    ],

    select: true,
    responsive:true,

    buttons: [
        { extend: 'create', editor: editor },
        { extend: 'edit',   editor: editor },
        { extend: 'remove', editor: editor }
    ]
});

} );

}(jQuery));

Code for Controller:

public class AdjustmentTableController : ApiController
{
private readonly string dbCon = " Example";
[Route("api/Table")]
[HttpGet]
[HttpPost]
public IHttpActionResult Table()
{

        var request = HttpContext.Current.Request;

        using (var db = new Database("sqlserver", dbCon))
        {

            var response = new Editor(db, "Table","generatorid").Where(q => q.Where("generatorid", " ", "="))
                .Model<TableModel>()
                .MJoin(new MJoin("Form").Model<Model>()
                 .Link("Table.generatorid", "Form.generatorid"))
                .Process(request)
                .Data();

            return Json(response);
        }
    }
}

}

Using Mjoin should give me results from both tables but don't working.

Also, have cshtml and model class that they are easy.

Please give me ideas what do I need to use, maybe "LeftJoin " statement I can use. Let me know if you need anythin else.

Thank you very much!!