colVis .noVis does not work with checkbox
colVis .noVis does not work with checkbox
PaulVickery
Posts: 41Questions: 6Answers: 0
Please can someone help me. I am sorry if this has been asked before, but I did not find it.
I am successfully implementing the functionality described by "Always shown checkbox".
I am also using '"stateSave: true' and colVis functionality.
The problem I have is that is that when I hide the checkbox (the 'active' column in my example), the system throws an error as below.
table.issue2.js:71 Uncaught TypeError: Cannot set properties of null (setting 'checked')
at ce.rowCallback (table.example.js:71:53)
at datatables.min.js:22:47893
at Array.map (<anonymous>)
at Z (datatables.min.js:22:47868)
at x (datatables.min.js:22:27520)
at Ie (datatables.min.js:22:28208)
at datatables.min.js:22:37013
at Object.t [as success] (datatables.min.js:22:32936)
at c (datatables.min.js:14:25266)
at Object.fireWith [as resolveWith] (datatables.min.js:14:26015)
I have therefore tried to use .noVis to make sure that the column does not get displayed in the "Column Visibility" pull down menu, but it does not work for the checkbox. ( The "Active" column is always in the list). In my example I can make .noVis work with the other (type text) columns.
In my example I have **not **used the jquery-ui css or js files, but the base Datatables ones. However, I have tested it using all the files in the "Always shown checkbox example" and the issue is the same.
The problem can be demonstrated by going to https://dt.taskmgr.co.uk/ and selecting "colVis .noVis does not work with checkbox".
Thank you in advance for your help.
Files used are:
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>issue2</title>
<link rel="stylesheet" type="text/css"
href="https://cdn.datatables.net/v/dt/jq-3.7.0/moment-2.29.4/dt-2.3.8/b-3.2.6/b-colvis-3.2.6/cr-2.1.2/cc-1.2.1/date-1.6.3/rr-1.5.1/sl-3.1.3/datatables.min.css">
<link rel="stylesheet" type="text/css" href="css/generator-base.css">
<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="css/editor.dataTables.min.css">
<script type="text/javascript" charset="utf-8"
src="https://cdn.datatables.net/v/dt/jq-3.7.0/moment-2.29.4/dt-2.3.8/b-3.2.6/b-colvis-3.2.6/cr-2.1.2/cc-1.2.1/date-1.6.3/rr-1.5.1/sl-3.1.3/datatables.min.js"></script>
<script type="text/javascript" charset="utf-8" src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script type="text/javascript" charset="utf-8" src="js/dataTables.editor.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/table.issue2.js"></script>
</head>
<body class="dataTables">
<div class="container">
<h1>colVis .noVis does not work with checkbox</h1>
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example" width="100%">
<thead>
<tr>
<th>Item</th>
<th>Description</th>
<th>Active</th>
</tr>
</thead>
</table>
</div>
</body>
</html>
<?php
/*
* Editor server script for DB table example
* Created by http://editor.datatables.net/generator
*/
// DataTables PHP library and database connection
include( "lib/DataTables.php" );
// Alias Editor classes so they are easy to use
use
DataTables\Editor,
DataTables\Editor\Field,
DataTables\Editor\Format,
DataTables\Editor\Mjoin,
DataTables\Editor\Options,
DataTables\Editor\Upload,
DataTables\Editor\Validate,
DataTables\Editor\ValidateOptions;
// The following statement can be removed after the first run (i.e. the database
// table has been created). It is a good idea to do this to help improve
// performance.
$db->sql( "CREATE TABLE IF NOT EXISTS `issue2` (
`id` int(10) NOT NULL auto_increment,
`item` varchar(255),
`description` varchar(255),
`active` varchar(255),
PRIMARY KEY( `id` )
);" );
// Build our Editor instance and process the data coming from _POST
Editor::inst( $db, 'issue2', 'id' )
->fields(
Field::inst( 'item' ),
Field::inst( 'description' ),
Field::inst( 'active' )
->setFormatter( function ( $val, $data, $opts ) {
return ! $val ? 0 : 1;
} )
)
->process( $_POST )
->json();
/*
* Editor client script for DB table example
* Created by http://editor.datatables.net/generator
*/
addEventListener("DOMContentLoaded", function () {
var editor = new DataTable.Editor({
ajax: 'php/table.issue2.php',
table: '#example',
fields: [
{
"label": "Item:",
"name": "item"
},
{
"label": "Description:",
"name": "description"
},
{
"label": "Active:",
"name": "active",
"type": "checkbox",
"separator": ",",
"separator": '|',
"options": [{ label: '', value: 1 }]
}
]
});
var table = new DataTable('#example', {
ajax: 'php/table.issue2.php',
columns: [
{
"data": "item"
},
{
"data": "description"
},
{
data: 'active',
render: (data, type, row) =>
type === 'display'
? '<input type="checkbox" class="editor-active">'
: data,
className: 'dt-body-center'
}
],
columnDefs: [
{ "targets": 0, "className": 'noVis' },
{ "targets": -1, "className": 'noVis' },
],
"stateSave": true,
layout: {
topStart: {
buttons: [
{ extend: 'create', editor: editor },
{ extend: 'edit', editor: editor },
{ extend: 'remove', editor: editor },
{ extend: 'colvis', columns: ':not(.noVis)', popoverTitle: 'Column visibility' },
]
}
},
select: {
style: 'os',
selector: 'td:not(:last-child)' // no row selection on last column
},
rowCallback: function (row, data) {
// Set the checked state of the checkbox in the table
row.querySelector('input.editor-active').checked = data.active == 1;
}
});
table.on('change', 'input.editor-active', function () {
editor
.edit(this.closest('tr'), false)
.set('active', this.checked ? 1 : 0)
.submit();
});
});
This question has an accepted answers - jump to answer
Answers
I believe the problem is you are applying
columns.classNamein bothcolumnsandcolumnDefsfor the last column. Thecolumnsconfig takes priority overcolumnDefs. See the-option columnDefs` Conflict resolution docs for details.Apply
columns.classNamein only one of those options.Kevin
Thank you very much for your quick reply.
I have tested it and you are right, that was the cause of the issue. Once again, thank you very much.