Information petion from the json with a range of dates with datatable
Information petion from the json with a range of dates with datatable
juansow
Posts: 6Questions: 3Answers: 0
Hi im trying to show a requested json in a datatable with to many information (30.000 - 40.000 datas) in a range of dates doing a post petion but i dont where i can put a conditional to just show the table just with the date information request, the petion need to be processed in backend side, please help.
Thanks.
thats my example code of a petion but i dont know if thats correctly.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/buttons/1.5.2/css/buttons.dataTables.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
<script type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/dataTables.buttons.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.1.3/jszip.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/pdfmake.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pdfmake/0.1.36/vfs_fonts.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.html5.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.print.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/buttons/1.5.2/js/buttons.colVis.min.js"></script>
<script type="text/javascript" src="https://cdn.datatables.net/select/1.2.7/js/dataTables.select.min.js"></script>
<title>POST</title>
<script>
$.fn.dataTable.ext.search.push(
function( settings, data, dataIndex ) {
var min = parseInt( $('#min').val(), 10 );
var max = parseInt( $('#max').val(), 10 );
var age = parseFloat( data[1] ) || 0; // use data for the age column
if ( ( isNaN( min ) && isNaN( max ) ) ||
( isNaN( min ) && age <= max ) ||
( min <= age && isNaN( max ) ) ||
( min <= age && age <= max ) )
{
return true;
}
return false;
}
);
</script>
<script>
$(document).ready(function(){
$('#data_table').DataTable( {
stateSave: true,
"ajax" : { "url": "http://jsonplaceholder.typicode.com/posts",
"dataSrc": function ( json ) {
for ( var i=0, ien=json.length ; i<ien ; i++ ) {
json[i][0] = '<a href="/message/'+json[i][0]+'>View message</a>';
}
return json;
}
},
columns : [
{"data" : "userId"},
{"data" : "id"},
{"data" : "title"},
{"data" : "body"}
]
});
$('#min, #max').keyup( function() {
table.draw();
} );
});
</script>
<body>
<table cellspacing="5" cellpadding="5" border="0">
<tbody><tr>
<td>Minimum Date:</td>
<td><input id="min" name="min" type="text"></td>
</tr>
<tr>
<td>Maximum Date:</td>
<td><input id="max" name="max" type="text"></td>
</tr>
</tbody></table>
<table id="data_table" class="cell-border compact" width="100%">
<thead>
<tr>
<th>USERID</th>
<th>ID</th>
<th>TITLE</th>
<th>BODY</th>
</tr>
</thead>
</body>
This discussion has been closed.
Answers
Hi @juansow ,
I didn't entirely follow your post, but if you're looking for a way to sent data to backend, you could put the date you want into
ajax.data,Cheers,
Colin