How to move my DT... into a "data base"

tommi

I want to decrease the size of my page and...
How to "move" my DT... into a "data base" and to keep all sorting/searching functions at the same time ?

Thank you .

rf1234

Using Editor is the easiest way to do this. Please check out the examples in the docs.

tommi

Sorry, but I'm not so familliar with data bases (Ajax, json etc) and I don't see any other way to decrease the size of my page than moving "my" DT (a huge entire html table) to a data base...

rf1234

Exactly, and that's why I recommend Editor to do that: Editor is a CRUD application. It allows you to Create, Read, Update and Delete records that you save in a database.

Of course you would have to familiarize yourself with databases, ajax, json and the like. There are many training options elsewhere on the web. Since these questions aren't datatables specific, you would need to search elsewhere, I am afraid.

tommi

Ok.
I tried this... https://datatables.net/examples/data_sources/ajax.html , but... Is this a good model for what I told you about ?

allan

Chiming in with some of my own thoughts:

Yes. It sounds like your problem is that you have a large HTML table and it is taking a while to download the whole page. Is that correct? How large is the file? And how many rows of data do you have? A link to the page would be very helpful.

Ajax loading the data allows the initial page size to be small and then the data loading to be deferred to be after the table has been drawn in it's "Loading" state - which is what is happening in the example you linked to. It also has the advantage that row nodes are not created until they are actually needed, thus spreading the load out over the life time of the page.

The JSON can be a simple text file, or you can generate it from a database. Which way to go depends on what trade offs you want to make (i.e. do you already have a database on your server that you can work with?).

Allan

tommi

Yes !
156.78 k (including the 433 rows of the table itself)... ;-(

You said... "simple text file"... nice ! But how to use it ?

For me didn't work the example from above... something gone wrong... I see only header and footer of the table .

Yes, I have a database... but I don't know how to use it .

allan

157k - as in kilo-bytes? Ajax isn't going to make that load any faster, that is fairly small and if that is taking a noticeable amount of time to load, then there is something else going on. As I said, a link to the page in question would help. That way I can understand what is going on, rather than guessing.

This is the file file in the example. I would suggest you also read this part of the manual.

Allan

tommi

155,57 KB in fact > 7.53 KB without table !
Yeah, I would like to show you that page but it's something private... maybe in private message .

https://datatables.net/examples/data_sources/ajax.html This example is the best that I found in DT for me... I think .

Important : "My" table is built with the help of DT... after a good feedback...BUT the table "has grown" over time...

tommi

It's about something like this... but with several search check boxes !
https://live.datatables.net/cofudura/2/edit

tommi

The idea is... if I could "combine" this (https://live.datatables.net/cofudura/2/edit) with this (https://datatables.net/examples/data_sources/ajax.html)... ?!
(the size of the page would be dramatically decreased and the 'content' : easy to edit) .

PS : It would be great a... complete code : html + JS/Ajax !

Thank you .

allan

https://live.datatables.net/cofudura/6/edit

All I've done is to add ajax: '/ajax/arrays.txt' into the initialisation object for the DataTable and remove the HTML for the table body.

Allan

tommi

Ooops... I wonder if I could use a XMLHttpRequest

function ft() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("container").innerHTML =
this.responseText;
}
};
xhttp.open("GET", "table.txt", true);
xhttp.send();
}

(would be much easier to edit...)
AND to keep all searching/sorting functions "alive" ??

Thank you .

allan

You could. Or you could just use ajax like in the example I gave you, which loads the text file via an XMLHttpRequest.

Allan

tommi

Yeah, I understood well the "essence" of your example..BUT my table is...something big... that I "developed" step by step with your help (some plugins...) .

I tried the "method" with XMLHttpRequest... (like in my example from above)...BUT... there is something that I missed...
I mean : how to 'relate' those JS files (of MY table) to the same table BUT 'coming' from a text file (via XMLHttpRequest) ??

If helps... this is the 'main' js file of MY table... :

$.fn.dataTable.Api.register('column().searchable()', function() {
var ctx = this.context[0];
return ctx.aoColumns[this[0]].bSearchable;});
function cdd(api) {
api.columns().every(function() {
if (this.searchable()) {
var that = this;
var col = this.index();
var slcd = $('thead tr:eq(1) td:eq(' + col + ') select').val();
if (slcd === undefined || slcd === '') {
$('thead tr:eq(1) td')
.eq(col)
.empty();
var select = $('<select><option value="">all</option></select>')
.appendTo($('thead tr:eq(1) td').eq(col))
.on('change', function() {
that.search($(this).val()).draw();
cdd(api);});
api
.cells(null, col, {
search: 'applied'})
.data()
.sort()
.unique()
.each(function(d) {
select.append($('<option>' + d + '</option>'));});}}});}
$(document).ready(function() {
var table = $('#example').DataTable({
fixedHeader: true,
orderCellsTop: true,
columnDefs: [
{searchable: true,
targets: [0, 4]
}],
initComplete: function() {
cdd(this.api());}});});

$(document).ready( function () {
var table = $('#example').DataTable();
$('input:checkbox').on('change', function () {
var offices = $('input:checkbox[name="ofc"]:checked').map(function() {
return this.value;
}).get().join(' ');
table.column(5).search(offices).draw(false);});});

allan

Please post a link to your JSON file and your current page and I'll take a look and hopefully be able to offer some help.