derived column with multiple columns as input
derived column with multiple columns as input
adamgoldsmith640
Posts: 3Questions: 1Answers: 0
1st example - https://www.cousincaveman.me/example1.php
debug code - unozil
2nd example - https://www.cousincaveman.me/example2.php
debug code - oretet
live page - https://www.cousincaveman.me/guestbook.php
live page debug code - orajig
(only including the live page as an afterthought, in case it matters. I think the examples are plenty complete enough?)
The only errors I'm seeing appear to be the column sort arrow images, are intermittent, and possibly only on the first example. Irrelevant, I think.
So, what I'm trying to accomplish...
There are 2 features I can't seem to use concurrently, listing all entries by default as in the first link, and manipulating data from several yes/no columns into 1 column, as in the second link.
I don't intend to let the end user edit anything, so I'm thinking the first example is a bad starting point, but it's currently the only way I can get it to list all entries by default.
Additionally, -IF- it's currently feasible, I'd like to make the derived column searchable. That's not a priority to me, but if it's available, I'd like to use it.
RELEVANT CODE BITS
FIRST EXAMPLE:
$(document).ready(function() {
editor = new $.fn.dataTable.Editor( {
ajax: {
url: "controllers/entryValidation.php",
type: 'POST'
},
processing: true,
table: "#guestbook",
//any changes here (possibly disregarding the labels) must be reflected down further, under $('#guestbook').DataTable( {
//AND in entryValidation.php ...and, if fields are added/removed, getAllDBColsHTML() (in guestbookEntryClass.php)
//order does not appear to matter here or in entryValidation, but definitely does down further
fields: [
{
label: "initials:",
name: "guestbook.initials",
attr: { maxlength: "3" }
}, {
label: "foundBy:",
name: "guestbook.foundBy"
}, {
label: "int-animals:",
name: "guestbook.int-animals"
}, {
label: "int-history:",
name: "guestbook.int-history"
}, {
label: "int-outdoors:",
name: "guestbook.int-outdoors"
}
]
} );
var table = $('#guestbook').DataTable( {
dom: 'Bftprli',
ajax: {
url: "controllers/entryValidation.php",
type: 'POST'
},
processing: true,
paging: true,
pageLength: 10,
serverSide: true,
order: [[ 1, 'asc' ]],
columns: [
/* from example found here - https://datatables.net/examples/basic_init/data_rendering.html
doesn't quite seem to do what I'm trying to do though, as it doesn't factor in data bits from other columns
data: 'position',
render: function(data, type) {
if (type === 'display') {
let link = "http://datatables.net";
if (data[0] < 'H') {
link = "http://cloudtables.com";
}
else if (data[0] < 'S') {
link = "http://editor.datatables.net";
}
return '<a href="' + link + '">' + data + '</a>';
}
return data;
}
*/
{ data: "guestbook.initials" },
{ data: "guestbook.foundBy" },
{ data: "guestbook.int-animals",
"visible": true,
"searchable": false, // don't search this column
"render":
function( data, type, row ) {
var interests = "";
if( data == null ) {
return '';
};
if( data[0] == 1 ) { interests += "animals"; }
return interests;
}
},
{ data: "guestbook.int-history" },
{ data: "guestbook.int-outdoors" }
],
select: {
style: 'os',
selector: 'td:first-child'
},
buttons: [
//{ extend: "create", editor: editor },
{ extend: "edit", editor: editor },
{ extend: "remove", editor: editor }
]
});
});
SECOND EXAMPLE:
$(document).ready(function() {
/* IMPORTANT note to self
When you add/remove columns here, you must:
-make the same changes to server-side.php AND getDBColsHTMLsearch() in goatClass.php
-ensure that the values for "targets" (and data[] for the goat's id) MATCHES 1-to-1 with server-side.php
-update "targets" : [##] to match the number of data points (not columns)
*/
$('#guestbook').DataTable( {
"processing": true,
"serverSide": true,
"ajax": "server-side.php",
"columnDefs": [
{ className: "initials", "width": "12%", "targets": 0 },
. . .
{ className: "id",
"targets": [ 13 ],
"visible": false,
"searchable": false
}
],
"createdRow": function ( row, data, index ) {
var interests = "";
if( data[4] == 1 ) { interests += "animals"; }
. . .
if( data[12] == 1 ) {
if( interests!="" ) { interests += ", "; }
interests += "weapons";
}
$('td:eq(4)', row).html( interests );
},
dom: 'Bftprli',
"pageLength": 10,
// initial search filter
"search": {
"search": ""
},
});
});
Answers
This means that the derives column cannot be searchable, unless you were to implement that in the database (possible, but not easy and not particularly fast).
Just to confirm, you mean that all records in the database should be shown on the page? If so, forget server-side processing. You need to download all of the records anyway to display them, so any subsequent requests would just be adding network latency.
How many records have you got to display?
Let's sort the processing side out first and then we'll take it from there, as this will impact on everything else.
Allan
--all records in the database should be shown on the page?
As long as it's less than the page length, yeah. Pretty sure that's what you meant.
It's just a guestbook, and it hasn't been live for long, so it only has about 5 entries so far.
--This means that the derives column cannot be searchable
Ah, that figures. What all does serverSide affect? I'm kind of thinking about changing it to false.
Probably worth reading over this part of the manual which explains the difference between client-side and server-side processing in DataTables. Only when you gets to tens of thousands of rows should you really be thinking about server-side processing.
Allan
With client side processing, do I need to have PHP spit out the data within table tags? (<td> etc.) Or can I keep using it more or less as I have been, just without serverSide?
I had initially disregarded this notion, thinking the HTML in the examples was just to simplify things for the sake of the examples.
You can probably keep it as it is, something like this. There it's getting the data from the server with an ajax call, same as before, but here the processing is all client-side.
Colin