- In datatable.js 2.1.8, the search function does not search anything.
- How to customize the search function for the built in search box? In my table, some TD has input[text] and select, I want to search the input only.
Thanks,
Michael
↧
mlin01
↧
DT + Plugins -> Type error
Link to test case: https://stackblitz.com/github/TheChatty/Datatable-i18n
Debugger code (debug.datatables.net):
Error messages shown: error TS7016: Could not find a declaration file for module 'datatables.net-plugins/i18n/de-DE.mjs'.
Description of problem:
I created a minimal, error exhibiting solution by:
* forking BootVue
* adding DT + Plugin
* pnpm run typecheck produces the above error
Nevertheless, the solution is working as is.
↧
↧
Error populating existing table with new data
Link to test case:
https://codepen.io/arcanisgk-the-sasster/pen/ZYzJqwG
Debugger code (debug.datatables.net):
Error messages shown:
DataTables warning: table id=translations-table - Requested unknown parameter '0' for row 0, column 0. For more information about this error, please see https://datatables.net/tn/4
Description of problem:
Hi, I'm back to my last stage of development related to datatables, in this case, as I do it in the test case, I'm trying to populate an existing datatable from a single script or method, that's why you can see that I'm trying to populate the table from a single static call to initialization and I'm not implementing Ajax.
In this case the problem has to do with the message, I am trying to clean the table in case it has previous data, and then I am trying to add new data, as well as make column adjustments if necessary... the problem is that the rows are added, but they do not have any data. As you can see I have created a Json/object structure that simulates the data.
↧
Hide certain columns when page loads, but allow them to be added using colvis
Hi,
This is my simple test case: https://live.datatables.net/taborero/1/
By default, all columns are visible when the page loads:
- Name
- Position
- Office
- Age
- Start date
- Salary
I can show / hide columns since colvis is set in the JS to initialise the data tables.
Is there a way I can configure the settings so that e.g. Age and Start date are hidden when the page loads, but then can be made visible using the "Column Visibility" menu?
Any advice much appreciated.
Thanks
Jim
↧
Problem with language.url
Error messages shown:
DataTables warning: table id=datenliste - i18n file loading error. For more information about this error, please see https://datatables.net/tn/21
Description of problem:
the script within the page:
new DataTable('#datenliste', { language: { search: 'In der Liste finden', url: 'styles/de-de.lang' },The file 'styles/de-de.lang' contains: ( from Internationalisation plug-in )
{
"emptyTable": "Keine Daten in der Tabelle vorhanden",
"info": "START bis END von TOTAL Einträgen",
..........
}
The chapter "21. i18n file loading error" doesn't give me a solution,
my browser Firefox (Version 133) and Edge (Version 131.0.2903) is CORS capable,
my IIS-7 has the entry "Access-Control-Allow-Origin *" under HTTP.
I get the same result if I rename the file to de-de .json
what can I do or what am I doing wrong?
↧
↧
In the DataTables date range filter example how do you clear the filter?
I am looking at the DataTables date range filter example and am able to filter for a date range but I cannot work out how to clear the filter after it has been applied.
↧
Select Control still has a name
I had a thread way back in 2018 for the items per page dropdown that it had a name causing it to be considered as form input. https://datatables.net/forums/discussion/49969/form-inputs-used-in-data-tables-are-defined-wrong#latest
It was said it would be addressed in V2, but it seems to still have a name. None of the other inputs used have a name.
↧
Bootstrap tooltip not firing after page 1 of paginated results
Sorry to ask the same question again, but I have spent a long while trying to answer this myself.
This is a test case replicating the issue:
https://live.datatables.net/pajodaba/1/edit
The issue is that when hovering over the link in the Name column, the Bootstrap tooltip appears.
The tooltip does not appear when clicking to view the results on pages 2 and 3.
I have searched to look for an answer, such as:
Bootstrap tooltip not rendered properly after paginating
Google search: "datatables" "tooltip" "pagination" "bootstrap"
I tried changing the code for the table to e.g.
const table = new DataTable('#data', {
order: [],
"pageLength": 5,
layout: {
topStart: {
buttons: ['copy', 'csv', 'excel','colvis']
}
},
"drawCallback": function( settings ) {
$('[data-toggle="tooltip"]').tooltip();
}
});
Or:
const table = new DataTable('#data', {
order: [],
"pageLength": 5,
layout: {
topStart: {
buttons: ['copy', 'csv', 'excel','colvis']
}
},
"fnDrawCallback": function() {
$('[data-toggle="tooltip"]').tooltip();
}
});
However I can't get it to work.
Sorry for asking basic questions.
If anyone has time to advise, please can I ask how I can solve this?
Thanks
Jim
↧
Excell export format HTML works only on first page
In my cells I have Buttons and Inputs. I need values for Excel. The code below works but only for 1st page. How to make it working for all pages?
format: {
body: function (data, row, column, node) {
// Check for button groups first
const buttonGroups = $(node).find('.btn-group');
if (buttonGroups.length) {
// Process button groups
return buttonGroups.map(function () {
const primary = $(this).find('.btn-primary').text().trim(); // Get the primary button text
const success = $(this).find('.btn-success').text().trim(); // Get the success button text
return `${primary}:${success}`; // Combine the values with a colon
}).get().join(', '); // Join multiple button groups with a comma
}
// Check for individual buttons
const buttons = $(node).find('button');
if (buttons.length) {
return buttons.map(function () {
return $(this).text().trim(); // Get the text of each button
}).get().join(', '); // Join button values with a comma
}
const inputElement = $(node).find('input');
if (inputElement.length) {
return inputElement.val(); // Return the value of the input element
}
return data; // Otherwise, return the cell data as-is
}
}
},
↧
↧
datatables.net-react 1.0.0 slots function does not consider all columns
Description of problem: The use of columnDefs with the string _all - all columns (i.e. assign a default) doesn't work for datatables.net-react slots, in the source code, the check for string _all is missing.
It seems that the datatables.net-react repo: https://github.com/DataTables/React is not visible, so I'll post my fix in here.
in the source code:
function applySlots(cache: SlotCache, options: DTConfig, slots: DataTableSlots) {
if (!options.columnDefs) {
options.columnDefs = [];
}
Object.keys(slots).forEach((name) => {
let slot = slots[name];
if (!slot) {
return;
}
// Simple column index
if (name.match(/^\d+$/)) {
// Note that unshift is used to make sure that this property is
// applied in DataTables _after_ the end user's own options, if
// they've provided any.
options.columnDefs!.unshift({
target: parseInt(name),
render: slotRenderer(cache, slot)
});
}
else {
// Column name
options.columnDefs!.unshift({
target: name + ':name',
render: slotRenderer(cache, slot)
});
}
});
}
the fix:
function applySlots(cache: SlotCache, options: DTConfig, slots: DataTableSlots) {
if (!options.columnDefs) {
options.columnDefs = [];
}
Object.keys(slots).forEach((name) => {
let slot = slots[name];
if (!slot) {
return;
}
// Apply to all columns
if (name === '_all') {
options.columnDefs!.unshift({
targets: '_all',
render: slotRenderer(cache, slot)
});
}
// Simple column index
else if (name.match(/^\d+$/)) {
// Note that unshift is used to make sure that this property is
// applied in DataTables _after_ the end user's own options, if
// they've provided any.
options.columnDefs!.unshift({
target: parseInt(name),
render: slotRenderer(cache, slot)
});
}
else {
// Column name
options.columnDefs!.unshift({
target: name + ':name',
render: slotRenderer(cache, slot)
});
}
});
}
with this fix, slots like below can work.
slots={{
_all: (data, type, row) => {
return "<div class='whitespace-normal max-w-60'>" + data || "-" + "</div>";
}
}}
which now applies to all columns
Hope it helps!
Edit: Oh! This is not perfect and the _all will overwrite other columns!
↧
wrong date sorting
wrong date sorting, e.g. 29-12-2020 should be at the top when ascending, any ideas ?
↧
colspan not working with single head row
According to https://datatables.net/examples/basic_init/complex_header, colspan is fully support in header rows.
This is working well in that example, obviously, where the header has multiple rows.
However, if a <thead> only has a single <tr> with cells that use colspan, a JavaScript error is raised.
Here is a test case with a single header row and one colspanned cell in it:
https://live.datatables.net/nipufeda/1/
However, when duplicating the row (I prepared that as a HTML comment in the test case), everything works fine again.
↧
Ajax loading executed before the entire layout is completed
Description of problem: I am using Datatables 2.1, with server-side ajax data loading. I want to create a select element in the topEnd section of the layout and use the selected option as a parameter for the ajax call. But when I load the page the value of the select element is undefined, because the layout code was not yet executed. Is there a way to postpone the ajax call until the entire layout is completed?
↧
↧
serverside:true and "?" in searc
Im am using datatables with "serverSide: true".
When I enter something like "abc?" into the quick search/filter field I get a 403 = forbidden server side error, because the question mark is not escaped/masked in the correct way and there are 2 question marks in it.
/kunden?filter=1&draw=7....&search%5Bvalue%5D=acc%3F
The %3F ist the hex code of the question mark.
How can I solve this?
The most easiest thing for me will be: deleting the question mark BEFORE sending the request to the server.
I tried with .keyup on the search field: this.value = this.value.replace('?', '')
but this is done AFTER sending the server side request and does not help at all.
Any suggestions?
↧
Why is my search box wrapped
Hi All,
In attachment you can find a screenshot of my website where I used the datatables to present my data.
In addition, The functionality works perfect, including the search and entry functions.
However, both the "search" and "show entries" seem to be "wrapped" as you can see on the screenshot and I can't identify the reason why. Even after disabling all unrelated style formats, the wrapping still takes place. I must be missing something but can't put my finger on it.
Any thoughts or input are welcome!
↧
YADCF with searchBuilder - ColReorder error when dynamic data
Hi.
I have table with dynamic data. When using YADCF, searchBuilder and colReorder I got error: can't access property "mData", N.aoColumns[l] is undefined, when reordering the columns. The error seams to come from YADCF.
It works when:
- I turn off YADCF
- or removing searchBuilder
- or have static data direct in my HTML
In this test case I get error, but still it seem like the colReorder is working, however, in my main project, the order get messed up. Am I missing somthing in the dynamic data setup?
↧
Column Headers Disappear when hiding table until data is formatted when using scrollx and scrolly
When using display:none in table style and using initcomplete function to show table and having scrollX true and scrollY value set, the table loads as expected but the column headers are missing. If I remove scrollX and scrollY, then it works as expected but I need it to work with scrollX and scrollY enabled. Data is Client-Side provided.
new DataTable('#licenseTable', {
processing: true,
fixedColumns: {
start: 3
},
//scrollCollapse: true,
// scrollX: true,
// scrollY: 450,
searching: true,
fixedHeader: true,
↧
↧
when i'm sort order why template does not re render
const columns = [
{ title: "Id", data: "Id", className: "min-width", },
{ title: "ExamSetupId", data: "ExamSetupId", className: "min-width"},
{ title: "ExamSetupCode", data: "ExamSetupCode", className: "min-width",render: '#ExamSetupCode' },
{ title: 'ExamSetupEnglishName', data: "ExamSetupEnglishName", className: "all min-width"},
{ title: "GradingSystem", data: 'GradingSystemCode', className: "min-width", render: '#GradingSystemCode' },
{ title: "CourseLength"), data: "CourseLength", className: "min-width",},
];
↧
data-order sorting difference between languages
Dear community,
we have a table which contains a column with costs and a custom currency called "NO-CUR" since we don't know which currency the customer used.
To have a locale independend sorting we are using the data-order attribute and adding the computer representation of the number. eg: 123.456, 123.45 and so on.
In the english version this one works quite good but as soon as the customer changes to german, the numbers get treated differently. In that case 123.456 is higher than 123.45 because in germany we use a dot as thousand separator.
Is there any solution for it? We were quite sure, it worked before we swapped to DataTables 2.1. Were there any changes? 
Thanks in advance and still, happy new year!
Pichutan
↧
Non-jQuery version of DataTables. Is this gonna happen?
Is there any initiative to have DataTables operate without jQuery as a dependency?
↧