Hey,

I'm using ajax object configuration for upload type of input. Everything works great, I just have an issue where if validation of uploaded image is rejected, server returns status code 422, so datatables displays "A server error occurred while uploading the file".

For other ajax requests I was able to handle this inside "error" function, but in this case it doesn't seem to be fired. Bellow is my code:

{
    label: 'Image:',
    name: IMAGE_NAME,
    ajax: {
        url: route('dt.post'),
        type: 'POST',
        data: (data) => {
            data._token = window.Laravel.csrfToken;
        },
        dataFilter: function (response) {
            const json = JSON.parse(response);
            $.each(json.files, function ( table, files ) {
                $.fn.dataTable.Editor.files[table] = files;
            });
            return response;
        },
        error: function (xhr, e/*, thrown*/) {
            let data = xhr.responseJSON;
            if (data && data.hasOwnProperty('fieldErrors')){
//                success(data);
            } else {
//                error(xhr, e, thrown);
            }
        }
    },
    type: 'upload',
    display: function ( file_id ) {
        ...
    },
    clearText: "Clear",
    noImageText: '-'
}

Any idea why error function is not fired when server code != 200?

Beside this approach I also tried to use ajax function instead of object function(method, url, data, success, error) (I use this as default method all over the project) so that I was able to call success or error callback, depending on what happened. If I add this to my upload field, upload field will completely ignore function and just make a POST request to the same page user is currently on. This works for DataTables data calls though, so not sure why it doesn't here...

Is there a way to handle validation errors and prevent "A server error occurred while uploading the file" getting displayed for upload field?

P.S.: After using DataTables for 5+ years I think, I think I could easily say it's one of the most advanced and flexible packages I ever used. GJ Allan and team

Hello,

I am using bootstrap 4 with datatables. I generated the datatable with json data.
I wanted to align table headers to center and body to left. So, I added classes to respective columns/columnDefs and added respective css as mentioned in this question.

The installation steps are same as this question.

However, these classes are being added to both header and body. i.e. when I added the class dt-head-center, this class is being added to both header cell as well as body cells.

My datatable code looks like:

var table = $("#login-details-table").DataTable({
    data: data,
    select: true,
    dom: 'Bfrtip',
    columnDefs: [
      {
          targets: 1,
          className: 'dt-head-center dt-body-left'
      }
    ],
    columns: [
      {
        title: "Login URL",
        data: 'loginUrl'
      },
      {
        title: "Username",
        data: 'username'
      }
    ]
 });

This code is generating following html:

header

<th class="dt-head-center sorting" tabindex="0" aria-controls="login-details-table" rowspan="1" colspan="1" aria-label="Username: activate to sort column ascending" style="width: 197px;">Username</th>

body

<td class=" dt-head-center">some text</td>

I also tried to use className in columns instead of columnDefs. But the output is same.

I have seen lots of discussion on trying to get datatables to present in a "card" or "panel" type view. I see there are lots of workarounds utilizing the various callbacks and events. I believe i have found the simplest method yet.

My method relies solely on CSS. Heres a few screen shots and a link to a sample page.
azguys.com/datatables/index.html

I have tested it out on Chrome and IE, they both seem agreeable to the CSS, no funny quirks. Give it a try and let me know what you think, and if it may have problems of other browsers.

during export I would like to report the data in a custom table.
HERE

Hi

I created a test case to demonstrate my problem but there is a script error so I can't show my issue. Test case is here live.datatables.net/kupizova/1/edit

All I want to do is show and hide panes based on their name, not the column position in the table. This is because the user can reOrder columns.

In my real world project, the searchPanes are ok and displayed in either a modal or a sidebar (user choice) but some panes like a telephone number or email address do not and should not be available for filtering because there would only ever be one. By rights, it should automatically be excluded from the panes because of the uniqueness.

If you were to apply this: -

$(document).ready(function() {
    $('#example').DataTable( {
        searchPanes:true,
        dom: 'Pfrtip',
        columnDefs:[
            {
                searchPanes:{
                    show: true,
                },
                targets: [0],
            },
            {
                searchPanes:{
                    show: false,
                },
                targets: [2],
            }
        ]
    });
});

Then pane 2 would not be shown

I want to replace targets: [2] with `targets: ['name:telephone', 'name:email']'

Is this possible?

Edited by Kevin:  Syntax highlighting. Details on how to highlight code using markdown can be found in this guide

I have used DataTables for simple Data Grid display purposes. I love it!
I just discovered Editor and I like the CRUD capabilities it provides.
Here are my 2 use cases:
1) just display read-only data from db on the main page of a public facing site using DataTables
2) In an admin back-end scenario use Editor for CRUD capabilities of the database items which is used as the primary data source for Use Case #1.

Is there a way that I can use Editor for both use cases? If so, how does one disable the CRUD capabilities of Editor so that I can satisfy use case #1? (Remove Create, Edit, Delete buttons)
If I can't use Editor for both Use cases, would it be ok to use DataTables on the read-only page (Use Case #1) combined with Editor for the back-end admin page (Use Case #2)?

I would appreciate any help I can get with this matter.

Thanks
Jeff
I'm using ASP.Net Core 3.1 MVC and SQL Server and visual Studio 2019 for the solution

My table is RowSpan type.

My code.

I am conditionally rendering inputs and textareas inline, something like below, to replace data with an <input> if a condition is met.

render: function(data, type, row) {
    if (row['id']) {
        data = '<input type="text" value="' + data + '">';
    }
    return data;
}

On another table, I'm able to insert a calendar for each row by giving it a unique id with meta.row. The calendar looks as it would on a normal form input.

{ title: "Mfg Date", data: undefined, orderable: false,
                render: function(data, type, row, meta) {
                    data = '<div class="ui calendar" id="calendar-' + meta.row + '"><input type="text" value="' + moment().format('MMMM D, Y') + '"></div>';
                    return data;
                }
            },

Now I want to insert a search input.

{ title: "Part Number", data: "part_no",
                render: function(data, type, row) {
                    if (row['comments'].substring(0, 2) === '??') {
                        data = '<div class="ui form"><div class="ui search input" id="searchParts"><input class="prompt" type="text" value="' + data + '"></div><div class="results"></div></div>';
                    }
                    return data;
                }
            }

This works, except it stays within the table border instead of overflowing outside of the table, like the calendar example above. I believe the main difference is the search input has a results div container. The results are fully rendered but as the last row in the table, completely obscured and a scrollbar is added. I have added a couple extra rows to the image below so that the results are partially visible and to show they are behind the table border.

The search results container has a z-index of 998, which I have been led to believe may be relevant. Not sure if anybody has any suggestions for things to try, but I thank you in advance.

Hey guys,

I have a little problem with datatables on my blazor site.
I´ve pagination enabled, but when I want to change the site my browser opens the url cause datatables does not recognize the correct url.

The correct url was: https://localhost:44314/exec/state/3 but datatables thinks that its https://localhost:44314/#. Cause its not the root site, my browser loads the root site instead of changing the page.

Is there anything special, which I must look for?

My datatable config looks like this:

    $(table).DataTable({
        "paging": true,
        "lengthChange": true,
        "searching": false,
        "ordering": true,
        "info": false,
        "autoWidth": false,
        "scrollX": true,
        "scrollY": true,
    });

Thanks for anyone who can help!

Best regards,
Robert

hi dear
I am R user , I need how to convert code in DataTables to DT package in R
thx for your valuable help

Do we have the feature that support Freezing the Row Group's header?

Code below. for min_amount and max_amount fields, I would like to be able to enter new data or edit data with the option of putting in a number or leaving the field blank or null value.

        {% include "dt_csrf.html" %}

        $('#opex').DataTable(
        );
        $('#otherexp').DataTable(
        );

        let bldg = {{ bldg.id}};
        console.log("bldg" + " " + bldg);

        let editor = new $.fn.dataTable.Editor({
            ajax: "/api/exptiedrev/editor/?format=datatables",
            table: "#exp",
            fields: [
                {
                    label: "Name",
                    name: "name"
                },
                {
                    label: "Type",
                    name: "exp_type",
                    type: "select",
                    options: [
                        {label: "Operating Expense", value: "Operating Expense"},
                        {label: "Other Expenses", value: "Other Expenses"}
                    ],
                    def: "Operating Expense"
                },
                {
                    label: "Revenue Type",
                    name: "rev_type",
                    type: "select",
                    options: [
                        {label: "Base Rent", value: "Base Rent"},
                        {label: "Gross Rent", value: "Gross Rent"}
                    ],
                    def: "Base Rent"
                },
                {
                    label: "Charge Rate %",
                    name: "charge_rate"
                },
                {
                    label: "Min, Charge $",
                    name: "min_amount"
                },
                {
                    label: "Maximum Charge $",
                    name: "max_aumount"
                },

            ],
        });

        editor.on('preSubmit', function (e, data, action) {
            if (action === 'create') {
                data.data[0]['bldg'] = parseInt(bldg);
            }
        });

        // Activate an inline edit on click of a table cell
        $('#exp').on('click', 'tbody td ', function (e) {
            editor.inline(this);
        });

        let table_rev_exp = $('#exp').DataTable({
            "serverSide": true,
            dom: "Bfrtip",
            "ajax": "/api/exptiedrev/?format=datatables&bldg=" + bldg,
            "columns": [
                {"data": "bldg"},
                {"data": "name"},
                {"data": "exp_type"},
                {"data": "rev_type"},
                {
                    "data": "charge_rate",
                    "render": function (data, type, row) {
                        return data + "%";
                    }
                },
                {"data": "min_amount", render: $.fn.dataTable.render.number(',', '.', 2, '$')},
                {"data": "max_amount", render: $.fn.dataTable.render.number(',', '.', 2, '$')},
            ],
            select: true,
            buttons: [
                {extend: "create", editor: editor},
                {extend: "edit", editor: editor},
                {extend: "remove", editor: editor},
                {
                    extend: 'collection',
                    text: 'Export',
                    buttons: [
                        {
                            extend: 'excelHtml5',
                            customize: function (xlsx) {
                                $(xlsx.xl["styles.xml"]).find('numFmt[numFmtId="164"]').attr('formatCode',
                                    '[$$-45C] #,##0.00_-');
                            },
                            exportOptions: {
                                columns: [1, 2, 3, 4, 5, 6],
                            },
                            title: "Expenses"

                        },
                        {
                            extend: 'pdfHtml5',
                            exportOptions: {
                                columns: [1, 2, 3, 4, 5, 6]
                            },
                            title: "Expenses"
                        },
                        {
                            extend: 'print',
                            exportOptions: {
                                columns: [1, 2, 3, 4, 5, 6]
                            },
                            title: " Expenses"
                        },
                    ]
                },
            ],
            "columnDefs": [
                {
                    "targets": [0],
                    "visible": false,
                    "searchable": false
                }
            ],
        });

        table_rev_exp.buttons().container()
            .appendTo($('.col-md-6:eq(0)', table_rev_exp.table().container()));

    });

1. When we click new button it's appearing light box with all the columns. once enter the data when i click create i want to catch all the data with column names ( same thing i need for edit and delete also). I tried with submit it's not working out. Please provide me any examples so that it will helps me to move forward.
2. After adding data to the datatable when i modify the data of particular column. i want to get the data with column name. as of now i can able to get only data not column name.
3. Is there anyway i can create instead lightbox(to enter data) we can show editable mode inside datatable only.

I need to only show add/edit/delete buttons depending on the user permissions. I found the following post that seems will do the trick:
https://datatables.net/forums/discussion/comment/160764/#Comment_160764

however, I have multiple tables per page. Is there a way to add buttons multiple tables without hard coding the table names?

Hi,

I'm using datatable for my project which is in php.
I have a column in the Japanese language and I want to sort that column in Japanese phonetic syllabaries which have an order:あ、い、う、え、お、か、き、く、け、こ... and on for the fifty traditional distinct sounds (a few of which are obsolete in modern Japanese). This sort order is called 五十音順 (gojuu on jun , or '50-sound order').
Please suggest.

Thanks in Advance,
Tanushree

I love working with datatable but I can't use it with server side Blazor, is there anyone who has a really working example?
i followed a few posts here but i couldn't get it to work

Noob question here: once I've modified a cell's data with cell().data() how do I get it to 'post' that to the DB?

So... I've added a button (based on one of your examples) that re-populates my 'rowReorder' column with 1...n based on the current sort. This is so that I can initially sort my data maybe alphabetically by name, for example, then 'save' that sort in my rowReorder column, then start reordering again from there. (Order is relevant to a lot of our lists.)

The function is working great, but it's just not saving to the DB. Can anyone please help me add to below code so it saves?

buttons: [
    {
        text: 'Reorder',
        action: function (e, dt, node, config) {
            table.column(0, {search:'applied', order:'applied'}).nodes().each(function (cell, i) {
                table.cell(cell).data(i + 1).draw();
            });
        },
    },

I have some custom header-level elements that have behavior that I would like to maintain on the fixed header. Does anyone know if the created fixed position table has any reference to the dataTable it originated from? I haven't noticed anything that consistently ties it to the table that created it, so far. Just want to make sure there isn't anything out-of-box that I'm missing before I create my own solution. Thanks in advance!
DataTable version: 1.10.20

I use drawCallback to set the scroll position of the child table.

"drawCallback": function (settings){
  $('div.dataTables_scrollBody').scrollTop(TOP);
},

But it doesn't work. Can you look at my code?
I succeeded in getting the scroll position, and I set the scroll position in CreateChild
However, the scroll position is not applied.

Parent table settings

$(document).ready(function () {

    $("a").button();

    var devEditor = new $.fn.dataTable.Editor({
        //skip
    });

    var childRows = null;

    var devTable = $("#deviceTable").DataTable({
        //skip
       "initComplete": function () {
            setInterval(function () {
                childRows = devTable.rows($('.shown'));
                scrollTop = {};
                
                let childrow = $('div.dataTables_scrollBody');
                $.each(childrow, function (index, v) {
                    let id = v.childNodes[0].id;
                    let top = $($(v)).scrollTop();
                    scrollTop[id] = top;
                });
                devTable.ajax.reload(null, false);
                //Server Request Code skip
            }, 3000);
        }
    });   

    $('#deviceTable tbody').on('click', 'td.fileName', function () {
        var tr = $(this).closest('tr');
        var row = devTable.row(tr);

        if (row.child.isShown()) {
            // This row is already open - close it
            destroyChild(row);
            tr.removeClass('shown');
            tr.removeClass('highlightExpanded');
        }
        else {
            // Open this row
            createChild(row, devTable.row(this).data().SN);
            tr.addClass('shown');
            tr.addClass('highlightExpanded');
        }
    });

    devTable.on('draw', function () {
        if (childRows) {
            //let rows = childRows;
            let rows = Object.assign({}, childRows);
            // Reset childRows so loop is not executed each draw
            childRows = null;
            rows.every(function (rowIdx, tableLoop, rowLoop) {
                var row = this;
                let top = 0;
                createChild(row, devTable.row(this).data().SN);
                this.nodes().to$().addClass('shown');
            });
        }
    });
});

child table settings

var scrollTop = [];

function createChild(row, id) {
    // This is the table we'll convert into a DataTable
    let ID = "child-" + id;
    var table = $('<table class="display" width="100%" id="{0}"/>'.format(ID));

    // Display it the child row
    row.child(table).show();

    var rowdata = row.data().detail;

    let TOP = scrollTop[ID];

    // Initialise as a DataTable
    var fileTable = table.DataTable({
        //skip
        "drawCallback": function (settings) {
            //console.log('scroll ' + top);
           //$('div.dataTables_scrollBody').scrollTop(TOP);
        }
    });
}


function destroyChild(row) {
    var table = $("table", row.child());
    table.detach();
    table.DataTable().clear();

    // And then hide the row
    row.child.hide();
}

Hi,

I'm having a hard time to get LeftJoins running with the editor.
I have two tables which should be displayed together (all values).
Model_Shop.cs is the main table and some values from Model_Main.cs should be joined/also displayed.

I tried to follow this guide: https://editor.datatables.net/manual/net/joins
but somehow I'm still getting this error: 'Unknown column 'tbl_main.id_user_edit' in 'field list''

tbl_main.id_user_edit shouldn't be accessed at all!
Only tbl_shop.id_user_edit is important in this case.
Somehow I must be understanding something wrong or overlook something.

Files are attached - to many variables to display properly in the forum.
I'd be happy if someone could help me how to display both tables at once!

Greetings
Gerrit