I am trying to write a record into a compound key table.

The table has three fields: 'ID', 'description' and 'languageText_KEY'.
The table contains translations for another table and is linked by 'ID'.
'ID and 'languageText_KEY' are the compound keys.

I am getting a validation error: "When inserting into a compound key table, all fields that are part of the compound key must be submitted with a specific value."

I don't understand why this error is generated because i can see in the headers of the POST request that all compound key fields posted have specific values.

The PHP code used:

$editor = Editor::inst($db, 'tblLogTrendKonfig_Text', ["ID","languageText_KEY"]);
$editor->debug(false);
$editor->write(true);

$f = Field::inst('tblLogTrendKonfig_Text.ID');
$f->setFormatter(Format::ifEmpty(null));
$fields[] = $f;

$f = Field::inst('tblLogTrendKonfig_Text.description');
$f->setFormatter(Format::ifEmpty(null));
$fields[] = $f;

$f = Field::inst('tblLogTrendKonfig_Text.languageText_KEY');
$f->setFormatter(Format::ifEmpty(null));
$fields[] = $f;

$editor->fields($fields);
$editor->process($_POST)->json();

I cannot change the table design unfortunately otherwise I would.
To me it make more sense to have a unique ID and a TEXT_ID field linked to the the other table.
But unfortunately I cannot change it.

Anyone know why this validation error is generated?

I want to remove the sort arrows from my table.

I have looked at the info at https://datatables.net/forums/discussion/comment/200892/#Comment_200892 and tried them all, but the sort arrows still show up for me.

I am using DataTables-1.11.3
I want to remove the sort arrows in the column headers.
I have tried
"ordering": 'false',
and
"order": [],

I have tried them both together.

I have tried the CSS in the link above.

I have tried

.no-sort::after { display: none!important; }
.no-sort { pointer-events: none!important; cursor: default!important; }

and added the class to the column

<th class="no-sort">

Any help would be appreciated.

Server-side datasource init once by the similar code:

serverSide: true,
ajax: '{!! route('scales.index.data') !!}',

Here I can put static filtering.
Then I'd like to change filter input and pass parameters to server on-the-fly.
Unfortunately, datatable draw() function doen't provide ability to pass parameters.
How to it?

Link to test case: https://datatables.net/extensions/fixedcolumns/examples/integration/select-checkbox.html

Description of problem: When using the Tab key to navigate through the table headers, it works fine towards the right side, but when using SHIFT+Tab, it is not possible to go completely to the very left side, but instead jump to the fixed columns. Furthermore, it is possible to go behind the fixed columns, as can be seen in the following screenshot from https://datatables.net/extensions/fixedcolumns/examples/initialisation/two_columns.html:

To reproduce, use the Tab key to first scroll to the right until the fixedColumn is displayed and then press Shift + Tab to go back.

Note the scroll bar here. It no longer scrolls when it is approaching to the left near the fixedColumns.

It should be handled (to scroll to the left automatically) when there are fixedColumns on the left so that it is not blocked by them.

The same goes for the fixedColumns at right: https://datatables.net/extensions/fixedcolumns/examples/initialisation/left_right_columns.html

Related source code that controls the scroll of header focus: https://github.com/DataTables/DataTablesSrc/blob/460081b587e82374ae2c1785d97a56667ca18499/js/core/core.scrolling.js#L126-L135

Hi,
How i can rename the Column visibility button into custom text like (Manage Column)

Thanks

Hi,
I want use a captcha code for DataTable search. When user want to search a value in DataTable, at first enter captcha code and then search shows the result.

Is Datatable Editor PHP 8.0 compatible ?

Thanks

[vite]: Rollup failed to resolve import "datatables.net/js/jquery.dataTables" :

good morning, I use laravel 10 with datatables, my app.js is this, everything was working now but when I execute the npm run build command I receive this error message and the tables present in laravel disappear, what should I do to solve it?

app.js

import * as bootstrap from 'bootstrap';
window.bootstrap = bootstrap;
import 'laravel-datatables-vite';

import jQuery from 'jquery';
window.$ = jQuery;

import moment from "moment";
window.moment = moment();

import Editor from '@datatables.net/editor-dt';
import 'datatables.net-editor-bs5/js/editor.bootstrap5';
import 'datatables.net-bs5/js/dataTables.bootstrap5';
import 'datatables.net-select-bs5/js/select.bootstrap5';
import 'datatables.net-searchpanes/js/dataTables.searchPanes';
import 'datatables.net-searchpanes-bs5/js/searchPanes.bootstrap5';
import 'datatables.net-responsive-bs5/js/responsive.bootstrap5';
import 'datatables.net-buttons-bs5/js/buttons.bootstrap5';
import 'jquery/dist/jquery';
import 'datatables.net/js/jquery.dataTables';
import 'datatables.net-select/js/dataTables.select';
import 'datatables.net-rowgroup-bs5/js/rowGroup.bootstrap5.js';
import 'bootstrap/dist/js/bootstrap.bundle';
Editor(window, $);

Hello,
I would like to select several lines and get idDelivery to update fields date, numberParcels, idReceptionist from my delivery table.
Debugger code : otoxog

When I make a first selection (click checkbox) nothing appears in the console, it is only when I make a second selection that in the console I see the different fields of the selected rows. I don't understand why during the first click nothing is displayed in the console.
And I'm not sure I'm using the right way
Regards.

vue version: 3.2.13
datatables.net-dt: 2.1.8
datatables.net-vue3: 3.0.2

I want to order my table by its first column (which is ID) on load. I have tried columns.orderSequence as described here but it doesn't help.

Here is my data table:

<DataTable 
            class="display" 
            width="100%" 
            :columns="keywordColumns" 
            :data="keywords" 
            :options="datatableOpts"
            :key="keywordTableId"
            ref="keywordDatatable"
        >
            <thead>
                <tr>
                    <th>ID</th>
                    <th>Anahtar Kelime</th>
                    <th>Oluşturma Tarihi</th>
                    <th>Güncelleme Tarihi</th>
                </tr>
            </thead>
            <template #column-4="props">
                <button-base
                    button-text="Etiketler"
                    button-type="button"
                    button-class="primary"
                    xxlarge="xxlarge"
                    @click="openTagModal(props.rowData)"
                ></button-base>
            </template>
            <template #column-5="props">
                <button-base
                    button-text="Düzenle"
                    button-type="button"
                    button-class="primary"
                    xxlarge="xxlarge"
                    @click="openInsertModal(props.rowData)"
                ></button-base>
            </template>
            <template #column-6>
                <button-base
                    button-text="Sil"
                    button-type="button"
                    button-class="primary"
                    xxlarge="xxlarge"
                ></button-base>
            </template>
        </DataTable>

And, I my column definitions are as below:

data() {
        return {
            //other stuff.. 
            keywordColumns: [
                { data: "id", orderSequence: "asc" },
                { data: "text" },
                { data: "createtime" },
                { data: "updatetime" },
                { sortable: false, width: '84px' },
                { sortable: false, width: '84px' },
                { sortable: false, width: '60px' }
            ],
            keywords: [],
        }
    }

jQuery 1.12.4, Datatable 1.10.20, Editor 2.3.2
I used one example in Editor but keep getting below error.

dataTables.editor.js:438 Uncaught TypeError: DataTable$6.util.set is not a function
at dataSet (dataTables.editor.js:438:29)
at new Field (dataTables.editor.js:5673:26)
at Editor.add (dataTables.editor.js:1644:23)
at Editor.add (dataTables.editor.js:1627:18)
at new Editor (dataTables.editor.js:6600:18)

I know Datatable has to be 1.10.20 or over to use Editor, but is there a restriction for jQuery version to use Editor? Thanks.

https://live.datatables.net/seviqabo/1/edit

Headers do not align with columns when page is resized

Hello,
I have a table that is invisible in the background.
Only the form is displayed. There are two tabs in this form
In the first tab there is a drop-down menu (see red frame).
If I now make a selection in the drop-down menu, it should appear in the second tab
a table to be filled with data.
This also works, but the next time you change the dropdown menu will be
Unfortunately, the data in the table is no longer updated.
What could be the reason?

Here is the link

https://feuerwehr.diedorf.bayern/FOM/uebung_neuju.php

Hello, I am creating a datatable that has a search text input underneath each column. However, when I click on the cell that has contains the cell, it also performs an order by. How do I stop it from ordering the table?

I've looked at this article and read all the comments but I can't seem to get the order by to STOP working when clicking the text input cells.

I have attached an image of when I click on the text input, it does an order by.

URL: https://datatables.net/examples/api/multi_filter.html

HTML Below

<head>
    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/2.1.8/css/dataTables.dataTables.css">
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script src="https://cdn.datatables.net/2.1.8/js/dataTables.js"></script>
</head>

<table id="example" class="display" style="width:100%">
    <thead>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Tiger Nixon</td>
            <td>System Architect</td>
            <td>Edinburgh</td>
            <td>61</td>
            <td>2011-04-25</td>
            <td>$320,800</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <th>Name</th>
            <th>Position</th>
            <th>Office</th>
            <th>Age</th>
            <th>Start date</th>
            <th>Salary</th>
        </tr>
    </tfoot>
</table>

JavaScript Here

<script>
    new DataTable('#example', {
        initComplete: function () {
            this.api()
                .columns()
                .every(function () {
                    let column = this;
                    let title = column.footer().textContent;

                    // Create input element
                    let input = document.createElement('input');
                    input.placeholder = title;
                    column.footer().replaceChildren(input);

                    var r = $('#example tfoot tr');
                    r.find('th').each(function () {
                        $(this).css('padding', 8);
                    });
                    $('#example thead').append(r);
                    $('#search_0').css('text-align', 'center');

                    // Event listener for user input
                    input.addEventListener('keyup', () => {
                        if (column.search() !== this.value) {
                            column.search(input.value).draw();
                        }
                    });
                });
        }
    });
</script>

In Product.cshtml:

@model List<Product>

@section Scripts{

}

In product.js:
$(document).ready(function () {
loadDataTable();
});

function loadDataTable() {

dataTable = $('#tableData').DataTable({
    "ajax": { url: '/admin/product/getall' },
    "columns": [
        { data: 'title', "width": "15%" },
        { data: 'isbn', "width": "15%" },
        { data: 'listPrice', "width": "15%" },
        { data: 'author', "width": "15%" },
        { data: 'category.name', "width": "15%" }
    ]
});

}

Error:
jquery.min.js:2 Uncaught TypeError: Cannot read properties of undefined (reading 'sClass')
at et (dataTables.min.js:4:14349)
at At (dataTables.min.js:4:29734)
at wt (dataTables.min.js:4:22944)
at Mt (dataTables.min.js:4:34015)
at HTMLTableElement.<anonymous> (dataTables.min.js:4:7044)
at Function.each (jquery.min.js:2:3003)
at S.fn.init.each (jquery.min.js:2:1481)
at S.fn.init.V [as dataTable] (dataTables.min.js:4:1327)
at H.fn.DataTable (dataTables.min.js:4:93325)
at loadDataTable (product.js:12:33)

How to solve the error?

In Index.cshtml: I try to show list of products by using datatables features by using the id="tabledata" on table html tag

@model List<Product>

<div class="card shadow border-0 my-4">
   <div class="card-header bg-secondary bg-gradient ml-0 py-3">
      <div class="row">
         <div class="col-12 text-center">
            <h2 class="text-white py-0">Product List</h2>
         </div>
      </div>
   </div>
   <div class="card-body p-4">
      <div class="row pb-3">
         <div class="col-6">
         </div>
         <div class="col-6 text-end">
            <a class="btn btn-primary" asp-controller="Product" asp-action="Upsert">
            <i class="bi bi-plus-circle"></i> Create New Product
            </a>
         </div>
      </div>
      <table id="tableData" class="table table-bordered table-striped" style="width: 100%">
         <thead>
            <tr>
               <th>
                  Title
               </th>
               <th>
                  ISBN
               </th>
               <th>
                  Author
               </th>
               <th>
                  Price
               </th>
               <th>
                  Category
               </th>
               <th></th>
            </tr>
         </thead>
      </table>
   </div>
</div>

@section Scripts{
    <script src="~/js/product.js"></script>
}

In product.js: where I define the loadDataTable() function and dataTable variable

$(document).ready(function () {
    loadDataTable();
});

function loadDataTable() {

    dataTable = $('#tableData').DataTable({
        "ajax": { url: '/admin/product/getall' },
        "columns": [
            { data: 'title', "width": "15%" },
            { data: 'isbn', "width": "15%" },
            { data: 'listPrice', "width": "15%" },
            { data: 'author', "width": "15%" },
            { data: 'category.name', "width": "15%" }
        ]
    });
}

Showing Error:

jquery.min.js:2 Uncaught TypeError: Cannot read properties of undefined (reading 'sClass')
    at et (dataTables.min.js:4:14349)
    at At (dataTables.min.js:4:29734)
    at wt (dataTables.min.js:4:22944)
    at Mt (dataTables.min.js:4:34015)
    at HTMLTableElement.<anonymous> (dataTables.min.js:4:7044)
    at Function.each (jquery.min.js:2:3003)
    at S.fn.init.each (jquery.min.js:2:1481)
    at S.fn.init.V [as dataTable] (dataTables.min.js:4:1327)
    at H.fn.DataTable (dataTables.min.js:4:93325)
    at loadDataTable (product.js:13:33)

How to solve this error?

I try to fetch the data from the api call to show the data by using the datatables features but it is showing me the errors

Link to test case:
https://live.datatables.net/sebeheco/1/edit

I use the example "Custom Filtering Options" with values ​​modified to my output.
But my example gives me a different output:
Column 11( Prämie ) is not displayed
The same searchPanes are displayed for columns 4 and 5
Did I forget something or do something wrong?
If so, can you give me the correct entries?
Thanks for your help

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:

Hello developers,

I'm excited to migrate from v1.13.10 to v2.0.0. I have an issue with paging buttons (without attaching styling)

I have 3500 records, each page displays 10 records. I'm using 'simple_numbers'.
In v1, I can see paging buttons "<" "1", "2", "3", "4", "5", ..., "350" ">".
In v2, I can see paging buttons "<" "1" ">" (when I click on Next, "1" will be replaced with "2")

So it is related to rendering issue.

I investigated the source code.

    function _pagingDraw(settings, host, opts) {
         ....
        // Responsive - check if the buttons are over two lines based on the
        // height of the buttons and the container.
        if (
            buttonEls.length && // any buttons
            opts.numbers > 1 && // prevent infinite
            $(host).outerHeight() >= ($(buttonEls[0]).outerHeight() * 2) - 10
        ) {
            _pagingDraw(settings, host, $.extend({}, opts, { numbers: opts.numbers - 2 }));
        }
    }

In my case, the value of $(host).outerHeight() is 0, the value of $(buttonEls[0]).outerHeight() is also 0.
If I put breakpoints into _pagingDraw. I can see nested call of _pagingDraw.
The value of numbers is decreased from 7 to 5 to 3 and then down to 1.

My current workaround is to specify a height in css file for the paging-container.
I'm not sure why the calculated height is 0, although Chrome DevTool tells its 52px.

I'm wondering if comparing the outer heights of host & buttons only when heights are positive values?
Hope my investigation makes sense.

https://codepen.io/oleonard/pen/mdNGNyK

There are several places in the base DataTables CSS where !important is used. Elements which are styled with !important cannot have those properties overridden by custom CSS. The only other option is to modify the default DataTables CSS, which can make upgrading more difficult.

In the example above I've added CSS to try to customize the style of the paging buttons. I am able to override the style of the "current" button's background but not the color of the text. The hover state can't have its background color or text color overridden.

Is !important really necessary?

I am importing data from an XML feed into my table. I am getting an error for an invalid JSON response. After looking into it, it seems I have to convert my XML data into json so it can be read, and I found the third example on this page but am not sure how to apply it so it works for me. I've been trying to get it to work with the expanding child rows to know avail, and any assistance would be much appreciated.

`function format(d) {
return (
'

' + '

Full name:

' + '

' + d.last + '

' + '

Extension number:

' + '

' + d.phone + '

' + '

Extra info:

' + '

And any further details here (images etc)...

' + '

'
);
}

    let table = new DataTable('#example', {
        // ajax: '../feeds/objects.txt',
        // columns: [
        //     {
        //         className: 'dt-control',
        //         orderable: false,
        //         data: null,
        //         defaultContent: ''
        //     },
        //     { data: 'name' },
        //     { data: 'position' },
        //     { data: 'office' },
        //     { data: 'salary' }
        // ],
        // order: [[1, 'asc']]
        ajax: {
            // dataType: "xml",
            url: '../feeds/employee_directory.xml',
            dataSrc: function (json) {
                for (var i = 0, ien = json.data.length; i < ien; i++) {
                    json.data[i][0] =
                        '<a href="/message/' + json.data[i][0] + '>View message</a>';
                }
                return json.data;
            }


        },
        columns: [
            {
                className: 'dt-control',
                orderable: false,
                data: null,
                defaultContent: ''
            },
            { data: 'last' },
            { data: 'first' },
            { data: 'phone' },
            { data: 'department' }
        ],
        order: [[1, 'asc']]
    });

    // Add event listener for opening and closing details
    table.on('click', 'td.dt-control', function (e) {
        let tr = e.target.closest('tr');
        let row = table.row(tr);

        if (row.child.isShown()) {
            // This row is already open - close it
            row.child.hide();
        }
        else {
            // Open this row
            row.child(format(row.data())).show();
        }
    });
</script>`