How can Ajax insert data from a file in your markup

Karabah

Link to test case:
Debugger code (debug.datatables.net):
Error messages shown:
Description of problem:
Hello there! Tell me, please - how can Ajax insert data from a file in your markup?
Sample data:
["col 0","col 1","col 2","col 3","col 4","col 5"]
["col 0","col 1","col 2","col 3","col 4","col 5"]
["col 0","col 1","col 2","col 3","col 4","col 5"]
Markup:
<tr class="my_class" >
<td>[col 2]</td>
<td class="my_class2">[col 0]</td>
<td><img class="my_class3" src="i/[col 1].jpg" alt="[col 0]" title="[col 4]" >[col 2]</td>
<td class="my_class3"></td>
<td class="my_class4">[col 0]</td>

kthorngren

how can Ajax insert data from a file in your markup?

You will need a webserver to process the ajax request and return the contents of the file in the response.

Kevin

Karabah

This is understandable. And how to insert columns in my markup: <td><img class="my_class 3" src="i/[col 1].jpg" alt="[cool 0]" title="[col 4]" >[col 2]</td> ... ?

Karabah

That brings it all out perfectly. But, I need to go to my markup.
$(document).ready(function() {
$('#example').DataTable( {
"ajax": "data/arrays.txt"
} );
} );

kthorngren

Teh Ajax docs explain how to use Ajax with Datatables.

Kevin

Karabah

$('#myTable').DataTable( {
ajax: ...
} );

// or!

$('#myTable').DataTable( {
ajax: ...,
columns: [
{ data: 0 },
{ data: 1 },
{ data: 2 },
{ data: 3 },
{ data: 4 },
{ data: 5 }
]
} )

How do I insert this in my markup?

kthorngren

How do I insert this in my markup?

Thats the beauty if Datatables. It inserts the rows for you

You can use columns.title to create the header titles if you wish or you create them in the HTML. See the HTML docs for the requirments.

Also here her some Ajax examples.
Kevin

Karabah

This is super! How do I insert this in my markup?
<tr class="my_class" >
<td>[col 2]</td>
<td class="my_class2">[col 0]</td>
<td><img class="my_class3" src="i/[col 1].jpg" alt="[col 0]" title="[col 4]" >[col 2]</td>
<td class="my_class3"></td>
<td class="my_class4">[col 0]</td>

kthorngren

Use coliumns.render to manipulate the data. Use createdRow or rowCallback, if the data changes, to manipulate the HTMLL like classes, etc. You can also use columns.createdCell. The exmples page is a good place to see many of the Datatbles capabilities.

Kevin

Karabah

Kevin! Thanks! Now I'll try to take Your advice.

Karabah

Found a suitable solution:

"ajax": {
"url": "arrays.txt",
"dataSrc": function ( json ) {
for ( var i=0, ien=json.data.length ; i<ien ; i++ ) {
json.data[i][0] = '<td>'+json.data[i][1]+'</td>';
json.data[i][1] = '<td>'+json.data[i][2]+'</td>';
json.data[i][2] = '<td><a data-fancybox="images" data-caption="'+json.data[i][3]+'" href="i/'+json.data[i][7]+'.webp"><img loading="lazy" class="product__img" src="i/'+json.data[i][7]+'.webp" alt="'+json.data[i][3]+' купить в интернет-магазине с доставкой" title="'+json.data[i][3]+'"></a></td>';
//json.data[i][3] = '<td class="product__name">'json.data[i][3]'</td>';
//json.data[i][4] = '<td>'json.data[i][4]'</td>';
//json.data[i][5] = '<td>'json.data[i][5]'</td>';
//json.data[i][6] = '<td class="product__price">'json.data[i][6]'</td>';
//json.data[i][7] = '<td>

</td><td><button class="product__add-to-cart-button" data-sb-id-or-vendor-code="'json.data[i][0]'" data-sb-product-name="'json.data[i][3]'" data-sb-product-price="'json.data[i][6]'" data-sb-product-quantity="1" data-sb-product-img="i/'json.data[i][7]'.webp"><i class="fas fa-cart-plus"></i></button></td>';
}
return json.data;
}
},

But if you uncomment //json.data[i][3] - there is nothing displayed. Tell me, please - what's the matter?

Karabah

+++++++++++++++++++

kthorngren

But if you uncomment //json.data[i][3] - there is nothing displayed. Tell me, please - what's the matter?

Standard Javascript syntax is needed. You have:

json.data[i][3] = '<td class="product__name">'json.data[i][3]'</td>';

You need + around the variables like this:

json.data[i][3] = '<td class="product__name">' + json.data[i][3] + '</td>';

While this works its not the most efficient method as Datatables will also process the row data. The methods I mentioned above will be more efficient since the data will only need processed once.

Kevin

Karabah

I don't understand javascript. Please help me with this code!

Agarad

Hello there! Please provide examples of working with an array without a key.

Agarad

With such:
{
"data": [
["1","cat1","name1","4"],
["1","cat1","name2","5"],
["1","cat1","name3","3"]
]
}