我有一个带有数据表的搜索页面,其中包含从数据库中提取的数百万行数据。 我被困在如何将ajax数据与deferRender一起使用并将数据集作为数据集传递给数据表。
请参阅下面的我的数据表代码,然后我有三个查询:
1。我想知道如何将迭代和间隔数据传递给
使用回调的数据表???
2.如何将图像列传递给
pdf出口? (以下代码中的dataURL不是预期的
结果)
3.所有方法都可以用来加快流程的进度?
数据表代码:
$('#resultTable').DataTable( {
destroy: true,
"autoWidth": false,
processing: true,
"serverSide": true,
//"aaData": result, // THIS IS WORKING FINE IF THE AJAX RESULT GIVEN DIRECTLY, BUT LOADING WILL TAKE MUCH TIME
ajax: {
type: 'POST',
url: 'search.php',
dataType: 'json',
data: { durationFrom: durationFrom, durationTo: durationTo, type: type, color: color, city: city, number: number },
success:function(result){
data = result;
var out = [];
for ( var i=0; i<data.length ; i++ ) {
out.push( [ data[i].id, data[i].eventtime, data[i].number, data[i].imageURL ] );
}
setTimeout( function () {
callback( {
draw: data.draw,
data: out,
recordsTotal: data.length,
recordsFiltered: data.length
} );
}, 50 );
}
},
"aoColumns": [
{ "sTitle": "Id",
"mDataProp": "id",
"sWidth" : "50px" },
{ "sTitle": "Date",
"mDataProp": "eventtime",
"sWidth" : "120px" },
{"sTitle": "Number",
"mDataProp": "number",
"sWidth" : "50px" },
{"sTitle": "Image",
"mDataProp": "imageURL",
"render": function(mDataProp, type, row) {
return '<img src="'+mDataProp+' " alt="No image available" />';
},
"sWidth" : "50px"
}
],
//deferRender: true,
scrollY: 400,
"bSortClasses": false,
info: true,
language: {
"zeroRecords": "No matching records found - Please search with different search criteria",
"emptyTable": "No data available in table",
"infoEmpty": "No entries to show",
"info": "Records _START_ to _END_ of _MAX_",
"loadingRecords": "Loading...",
"Processing": "<img src='images/loader.gif' alt='Processing... Please wait...'>",
"LoadingRecords": 'Loading...',
"search": "Search:",
"paginate": {
"first": "First",
"last": "Last",
"next": "Next",
"previous": "Previous"
},
},
aaSorting : [[0, 'desc']],
"pagingType": "input",
"pageLength": 100,
"lengthMenu": [[100, 500, 1000, 10000], [100, 500, 1000, 10000]],
dom: 'Blfrtip',
buttons: [
'copy',
{
extend: 'csv',
title: myFileName
},
{
extend: 'excelHtml5',
title: myFileName
},
'print' ,
{
extend: 'pdfHtml5',
title: myFileName ,
exportOptions: {
columns: [0, 1, 2, 3, 4],
stripHtml: false
},
customize: function (doc) {
for (var i=1;i<doc.content[1].table.body.length;i++) {
var imageMarkUp = doc.content[1].table.body[i][4].text;
var srcImg = $(imageMarkUp).attr('src');
var img = new Image,
canvas = document.createElement("canvas"),
ctx = canvas.getContext("2d"),
src = srcImg;
img.crossOrigin = "Anonymous";
img.onload = function() {
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage( img, 0, 0 );
localStorage.setItem( "savedImageData", canvas.toDataURL("image/png") );
}
var dataURL = canvas.toDataURL("image/png");
//NOT WORKING Correctly
if (doc.content[1].table.body[i][4].text == img.src) {
delete doc.content[1].table.body[i][4].text;
doc.content[1].table.body[i][4].image = 'img';
}
}
doc.content.splice(4, 0, {
margin: [0, 0, 0, 12],
alignment: 'center',
image: dataURL
});
}
}
]
});