How can Ajax insert data from a file in your markup
How can Ajax insert data from a file in your markup
Karabah
Posts: 9Questions: 0Answers: 0
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>
This discussion has been closed.
Replies
You will need a webserver to process the ajax request and return the contents of the file in the response.
Kevin
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> ... ?
That brings it all out perfectly. But, I need to go to my markup.
$(document).ready(function() {
$('#example').DataTable( {
"ajax": "data/arrays.txt"
} );
} );
Teh Ajax docs explain how to use Ajax with Datatables.
Kevin
$('#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?
Thats the beauty if Datatables. It inserts the rows for you
You can use
columns.titleto 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
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>
Use
coliumns.renderto manipulate the data. UsecreatedRoworrowCallback, if the data changes, to manipulate the HTMLL like classes, etc. You can also usecolumns.createdCell. The exmples page is a good place to see many of the Datatbles capabilities.Kevin
Kevin! Thanks! Now I'll try to take Your advice.
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?
+++++++++++++++++++
Standard Javascript syntax is needed. You have:
You need
+around the variables like this: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
I don't understand javascript. Please help me with this code!
Hello there! Please provide examples of working with an array without a key.
With such:
{
"data": [
["1","cat1","name1","4"],
["1","cat1","name2","5"],
["1","cat1","name3","3"]
]
}