Hi,
I tried the trial version and everything worked great. Then I bought a license and installed the licensed version. Now I get a json error message without the database being touched or changed:
"DataTables warning: table id = example - JSON encoding error: Malformed UTF-8 characters, possibly incorrectly encoded"
Any idea what to do?
Thanks for your help
Thomas
I see that the Editor can handle one-to-many joins (https://editor.datatables.net/examples/advanced/joinArray.html).
Is it possible to handle these joins also with the inline editor (https://editor.datatables.net/examples/inline-editing/join.html)?
What I would like to have is an inline multiple <option> tag where the users can select many entries; for example:
Then the user clicks on Location, and can edit them:
How can I change the color of the Info texts as highlighted in the image below : 
My JS is as follows :
$(document).ready(function() {
var table = $('#example').dataTable({
"columnDefs": [
{ "targets": [3,4], "orderable": false }
]
});
} );
Hello there!
I'm using the SSP class on a simple DataTable with 4 columns, very similar to the base examples. The code in question is this:
json_encode(
SSP::complex( $_GET, $sql_details, $table, $primaryKey, $columns, "`company` = '$searchValue'")
);
Now on this project I'm using PHP 8 rather than PHP 7.4. I've confirmed that if I switch back to 7.4 the issue goes away. On 8, however, I receive this error:
An SQL error occurred: SQLSTATE[HY093]: Invalid parameter number: number of bound variables does not match number of tokens
Examining the SSP class and doing some var_dumping etc to figure out where the issue is, it's here:
// Total data set length
$resTotalLength = self::sql_exec( $db, $bindings,
"SELECT COUNT(`{$primaryKey}`)
FROM `$table` ".
$whereAllSql
);
It appears that since $bindings is included in this totaling function, it's causing the error message shown above. By changing $bindings to null it prevents the error. So far as I can tell, there is no danger in doing this. In the sql_exec function, the block to add bindings will be skipped since it's not an array, the SQL statement is still prepared, and since the statement is simply select count(id) from jobs ($whereAllSql is null in this case) I cannot see any reason this would be a problem.
However, perhaps I'm under-thinking it. Is there a reason this could cause problems, or am I safe in making this adjustment to the class? Thanks!
Afternoon community,
I have a quick question I hope. I have a date table being populated via Ajax datasource that returns results in pages. Currently I am looking at a result set of some 2k pages. How can I think the pagination of the datatable to the Ajax datasource being returned?
Any help would be greatly appreciated.
Anthony
Hi,
I'm using child rows in which a child editor table is displayed, as shown in this blog post https://datatables.net/blog/2019-01-11
It works great but I'm having some trouble with the styling on the child table.
It seems like the child tables inherits most of the css/styling from the parent table.
If the parent table have class=display, and the child table have no class, the child table will still use the display class from the parent.
It's not my enviroment that causes it, I tested on the blog post on the inspection tool, removing the class=display on the parent also affects the child.
Any suggestions on how to make the child tables "style-independent"?
Also, when debugging this I found that the draw events on the child table is not reflected in console as the child table draw, but the parent.
$('table').DataTable().on('draw', function() {
console.log('table draw #+this.id);
});
The above will output 'table draw #parent_table' even if its the child that is actually drawn
There is an current issue where you set a background color on a cell and then sorting a column, it loses the background color you've already defined it. There are another post that help me but I have to do some modification to work for my script:
Link: https://datatables.net/forums/discussion/11627/sorting-a-column-loses-background-color-formatting
Final solution:
//This is for the current css style applied for the cells:
}
table.dataTable.display td.accuracyData1 {
background-color: seagreen;
}
table.dataTable.display td.accuracyData0 {
background-color: crimson;
}
//This is what I have to add for the sorting of columns keep the cell format color I wanted to:
table.dataTable.display tbody tr.even td.accuracyData1.sorting_1 {
background-color: seagreen;
}
table.dataTable.display tbody tr.odd td.accuracyData1.sorting_1 {
background-color: seagreen;
}
table.dataTable.display tbody tr.even td.accuracyData0.sorting_1 {
background-color: crimson;
}
table.dataTable.display tbody tr.odd td.accuracyData0.sorting_1 {
background-color: crimson;
}
Hope this solution help someone.
Marco Cáceres
I try to install DT 1.11 with responsive plugin with "webpack": "^5.58.1"
Error when I try to use webpack to run a webpack development server for my website.
May I know why?
Compiled with problems:
ERROR in ./node_modules/datatables.net-responsive-bs5/js/responsive.bootstrap5.js
Module not found: Error: Can't resolve 'datatables.net-responsive' in '/mypath/node_modules/datatables.net-responsive-bs5/js'
My js file import the library as below.
import "datatables.net-bs5";
import "datatables.net-responsive-bs5";
my package.json deps:
"dependencies": {
"datatables.net-bs5": "^1.11.3",
"datatables.net-responsive-bs5": "^2.2.9"
}
node version: 16.13.0
npm version: 8.1.0
Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:
Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:
Original Page (when load first)
When i go back and then come back again to the same page via browser navigation
My problem is elements are duplicating and only first element works and bottom elements dont work. What is the problem that these elements are duplicating ?
i have index page which has a div which loads pages.
$(document).pjax('.psa', '#contentArea');
I'm using select2 plugin with datatable.
So, I am in the process of trying to switch from client-side processing to server-side processing, but I am having problems getting the data to appear. I get an error message:
Uncaught TypeError: Cannot read properties of undefined (reading 'cell')
Link to test case
The test case isn't very useful as it doesn't run server-side, nor does it show all of my files.
live.datatables.net/geqisica/1/edit
Debugger code (avudoh):
Error messages shown:
I have the ssp.class.php file in the same folder as the server_processing.php file. When I try to load the page I get the processing message then the console shows the following:
jQuery.Deferred exception: Cannot read properties of undefined (reading 'cell') TypeError: Cannot read properties of undefined (reading 'cell')
at _fnDrawHead (http://localhost:8000/DataTables/datatables.js:63061:59)
at _fnInitialise (http://localhost:8000/DataTables/datatables.js:64440:3)
at loadedInit (http://localhost:8000/DataTables/datatables.js:60952:6)
at HTMLTableElement. (http://localhost:8000/DataTables/datatables.js:60965:5)
at Function.each (http://localhost:8000/js/jquery-3.5.1.js:381:19)
at jQuery.fn.init.each (http://localhost:8000/js/jquery-3.5.1.js:203:17)
at jQuery.fn.init.DataTable [as dataTable] (http://localhost:8000/DataTables/datatables.js:60522:8)
at jQuery.fn.init.$.fn.DataTable (http://localhost:8000/DataTables/datatables.js:74966:18)
at HTMLDocument. (http://localhost:8000/paging2.php:88:16)
at mightThrow (http://localhost:8000/js/jquery-3.5.1.js:3762:29) undefined
jQuery.Deferred.exceptionHook @ jquery-3.5.1.js:4046
jquery-3.5.1.js:4055 Uncaught TypeError: Cannot read properties of undefined (reading 'cell')
at _fnDrawHead (datatables.js:63061)
at _fnInitialise (datatables.js:64440)
at loadedInit (datatables.js:60952)
at HTMLTableElement. (datatables.js:60965)
at Function.each (jquery-3.5.1.js:381)
at jQuery.fn.init.each (jquery-3.5.1.js:203)
at jQuery.fn.init.DataTable [as dataTable] (datatables.js:60522)
at jQuery.fn.init.$.fn.DataTable (datatables.js:74966)
at HTMLDocument. (paging2.php:88)
at mightThrow (jquery-3.5.1.js:3762)
favicon.ico:1 Failed to load resource: the server responded with a status of 404 (Not Found)
Description of problem:
I am initially just trying to load a few fields in a table using the server_processing.php file from the example page. https://datatables.net/examples/server_side/simple.html
In the end I will not even be able to use the server_processing.php as I will need to use joined tables in the query. I also need to use the filtering from the on screen filters. (But I need to at least prove the simple case works).
HTML File
<script>
$(document).ready(function() {
$('#example').DataTable( {
"processing": true,
"serverSide": true,
"ajax": "/scripts/server_processing.php"
} );
} );
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>IP Address</th>
<th>Port</th>
<th>Protocol</th>
<tr>
<thead>
</table>
server_processing.php: The issue I am having with this script is that the tables in this database use compound keys and not an identifier field. I am unsure how to specify the $primaryKey value in this script.
// DB table to use
$table = 'ports';
// Table's primary key
$primaryKey = 'ip_address';
// `ip_address`,`port`,`protocol`
// Array of database columns which should be read and sent back to DataTables.
// The `db` parameter represents the column name in the database, while the `dt`
// parameter represents the DataTables column identifier. In this case simple
// indexes
$columns = array(
array( 'db' => 'ip_address', 'dt' => 0 ),
array( 'db' => 'port', 'dt' => 1 ),
array( 'db' => 'protocol', 'dt' => 2 )
);
// SQL server connection information
$sql_details = array(
'user' => 'xxx',
'pass' => 'xxx',
'db' => 'xxx',
'host' => '127.0.0.1'
);
require( 'ssp.class.php' );
echo json_encode(
SSP::simple( $_GET, $sql_details, $table, $primaryKey, $columns )
);
So at this point:
1. I am unsure how to set a multi-field key in the script
2. I am unsure why I am not getting data returned to the table
Hello, i have problem with buttons in my project. I am using Laravel and i added datatables. It works for me to search and select how many records there are on the page. Unfortunately, buttons for exporting pdf, excel, copying, printing do not work. It's my code in blade.php in section @js:
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.11.3/js/dataTables.bootstrap4.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/2.0.1/js/dataTables.buttons.min.js"></script>
<script type="application/json" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/2.0.1/js/buttons.bootstrap4.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/2.0.1/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/2.0.1/js/buttons.print.min.js"></script>
<script>
$(document).ready(function () {
$('.dropdown-toggle').dropdown();
});
$(document).ready( function (){
$('#is-dataTable').DataTable(
{
"dom": '<"html5buttons"B>lTfgt<"row"<"col-md-6"i><"col-md-6"p>>',
buttons: [
{ extend: 'copy'},
{extend: 'csv'},
{extend: 'excelHtml5', title: 'ExampleFile', class: "buttonExcel"},
{extend: 'pdf', title: 'ExampleFile'}
]
}
);
});
</script>
I can't see this buttons.
Edited by Colin - Syntax highlighting. Details on how to highlight code using markdown can be found in this guide.
Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:
Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:
I am trying to change the value of the cell using
table.row(tr).data on click; but I can't find how I am able to do that.
$('#cautela_table tbody').on('click', 'td.star-control', function () {
var tr = $(this).closest('tr');
var row = table.row(tr);
var cotista_id = row.data().cotista__id;
var status = row.data().favorito;
atualizaStatus(cotista_id, !status);
if (status == true) {
atualizaStatus(cotista_id, false);
row.node().cells[0].innerHTML = '<i class="far fa-star"></i>';
} else {
atualizaStatus(cotista_id, true);
row.node().cells[0].innerHTML = '<i class="fas fa-star"></i>';
}
I already did this, but I want to change the internal value so the person doesn't have to reload the page.
Can you help me?
When there are right-fixed columns with bootstrap 5 styling, the left border of the left-most right-fixed column is missing.
https://jsfiddle.net/polshgiant/dtm4793g/
Thanks for any help.
When using fixed columns and the footer has a colspan, the footer starts rendering at the 2nd column.
Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem: Hi guys, I was working with datatables and it is a very nice tool. Does datables have an integration with tailwindcss?
Hello,
I am looking for a way to highlight rows with the same value in a specific column. The color should change with the value. During my search I found:
createdRow: function( row, data, dataIndex){
$(row).addClass(data.color);
}
But I also found this page:
https://legacy.datatables.net/release-datatables/examples/basic_init/table_sorting.html
Is this feature allready integrated? Because this is, what I am looking for.
Happy for some answer. Thanks!
Regards
Harald