We have more than 200 000 records. Datatables take too much time to load.
here is code we have using
$(document).ready(function() {
var dataTable = $('#dataTables-example').DataTable( {
responsive: true,
"processing": true,
"serverSide": true,
'iDisplayLength': 25,
"aaSorting": [[ 7, "desc" ]],
"ajax": $.fn.dataTable.pipeline( {
url: 'report_list_ajax.php'
}),
"columnDefs": [
{"targets": 0, "orderable": false },
{"targets": 4, "orderable": false },
]
});
});
so we dont need jquery datatables load or initialize while page loading.
and jquery datatables initialize and execute when submitted the external form only.
i.e: "FROM" and "TO Date" selection and click on submit button, the datatables will load based on form inputs..
Datatables initialize and execute when external form submit:
$("#external_form_id").on("submit", function(){
//datatable initiate code...
});
Based on code above, datatable will not initiate until the external form trigger submit. This is what u want?
Related
I'm trying to convert an existing "select" dropdown filter on a table generated via the DataTables library to be able to handle multiple options, and though I think I have it correct on the front-end Javascript, I'm having trouble figuring out how to handle it in the back-end PHP.
The below is from the script in the front-end view, which makes the Ajax Post request:
<script>
function generateTable() {
var oTable = $('#MyData').dataTable({
"aaSorting": [
[1, "desc"]
],
"aLengthMenu": [
[10, 25, 50, 100, 200],
[10, 25, 50, 100, 200]
],
"iDisplayLength": <?= $Settings->rows_per_page ?>,
'bProcessing': true,
'bServerSide': true,
'sAjaxSource': '/my/getData/path',
'fnServerData': function(sSource, aoData, fnCallback) {
// ...SNIP...
aoData.push({
"name": "some_status",
"value": $("#some_status").val()
});
$.ajax({
'dataType': 'json',
'type': 'POST',
'url': sSource,
'data': aoData,
'success': fnCallback
});
},
"aoColumns": [],
}).fnSetFilteringDelay().dtFilter([
// ...SNIP...
{
column_number: 4,
filter_default_label: "[<?= lang('some_status'); ?>]",
filter_type: "multi_select",
data: []
},
// ...SNIP...
], "footer");
}
</script>
I can confirm that the selected values are added to an array by console logging the $("#some_status").val(). So my assumption was that it would be passed to the backend as an array as well, but apparently not.
What actually happens is the first selection goes fine, but any subsequent selection clears the table, and only works if there's a single value selected, leaving me to believe that only the first selection is pushed to the aoData array.
In PHP I have:
$this->load->library('datatables');
$this->datatables
->select("id, date, reference_no, supplier, some_status")
->from('purchases');
$some_status = $this->input->post('some_status');
if ($some_status != '') {
$this->datatables->where('status', $some_status);
}
How do I handle the some_status value if it's an array, or how do I make sure it even is an array after it was pushed toaoData?
Any help will be appreciated!
EDIT:
To clarify, by console logging the result like below returns the correct selection as I add and remove selections from the multi-select dropdown:
console.log($("#some_status").val());
If I select "Top option" from the dropdown, I get:
[
"top_option"
]
When I then select "Another option" as well, I get:
[
"top_option", "another_option"
]
So the JS side is handling the multi-select, but I don't know if the below is correct, as it works only with a single select, nothing more:
$some_status = $this->input->post('some_status');
if ($some_status != '') {
$this->datatables->where('status', $some_status);
}
In jquery data tables excel,copy and pdf buttons not showing other than this every thing works fine what could be the issue.
$(document).ready(function() {
var table = $('.export-table').DataTable({
dom: 'Bfrtip',
'bServerSide': true,
'sAjaxSource': 'api',
buttons: ['copy', 'excel', 'pdf']
});
table.buttons().container().appendTo('#export-table_wrapper .col-sm-6:eq(0)');
});
Any help would be appreciated.
I have a code below and I have tried it already and its working.
What I am trying to achieve is to load data using ajax to my data tables.
The code below is working but now I would to refresh every 5 to 10 second checking if there is new data in the database.
$(document).ready(function () {
$("#get_categories").DataTable({
"ajax": { //create an ajax request to display.php
"url": "process/get_categories.php",
"dataSrc": ""
},
"columns": [
{"data": "id"},
{"data": "name"},
{"data": "action"}
],
dom: 'Bfrtip',
buttons: [
'copy', 'csv', 'excel', 'pdf', 'print'
]
});
});
As you've already defined an AJAX source for your DataTable you can simply call reload() in an interval:
var table = $("#get_categories").DataTable({
// settings...
});
setInterval(function () {
table.ajax.reload();
}, 10000);
However, as #ADyson mentions in the comments, refreshing a data source this often can lead to server load problems, depending on how may concurrent users you have accessing the data. I'd suggest looking in to using WebSockets or Server Sent Events as a more scalable alternative.
I am using Jquery data-tables plugin for my tables(using server-side scripting. but the alignment of pagination of data tables is going off after 6th page, please help me to sort this out.
pagination before 6th page:
pagination after 6th page:
$('#contacts').DataTable(
{
"order": [[ 0, "desc" ]],
"pageLength": 1,
"lengthChange": false,
"processing": true,
"serverSide":true,
"ajax":{
url:"abc.php",
type:"post"
},
"columnDefs": [
{"className": "dt-center", "targets": "_all"}
]
} );
$('input[type=search]').addClass('form-control round');
$("#contacts_filter").css('margin-right', '15px');
$("#contacts_filter").css('text-align', 'center');
$("#contacts_info").css('padding-left', '15px');
$("#contacts_info").css('font-size', '20px');
$("#contacts_paginate").css('padding-bottom', '10px');
$("#contacts_paginate").css('padding-top', '10px');
I'm using table-striped Datatables with my admin panel script and when try to display large amount of data from mySQL and PHP it take lots of time to load page.
Below is code using with datatables:
<script>
'use strict'; var Site = window.Site;
$(document).ready(function($) { Site.run(); });
(function()
{
$(document).ready(function()
{
var defaults = $.components.getDefaults("dataTable");
var options = $.extend(true, {}, defaults,
{
"aoColumnDefs":
[{ 'bSortable': false, 'aTargets': [-1] }],
"iDisplayLength": 10,
"aLengthMenu":
[
[5, 10, 25, 50, -1],
[5, 10, 25, 50, "All"]
],
"sDom": '<"dt-panelmenu clearfix"Tfr>t<"dt-panelfooter clearfix"ip>',
"oTableTools": { "sSwfPath": "../assets/vendor/datatables-tabletools/swf/copy_csv_xls.swf" }
});
$('#exampleTableTools').dataTable(options);
});
})();
</script>
How to load all records and in same load page faster.
if you need a large amount of data than you have to set limits and pagination in php.
The data table is set to limit after getting all of the data.
if you have larger data thank its necessary to set pagination in php.
Like the others said. If you load 1000 entries at once, the page will be slow.
For that purpose you need to enable pagination:
'bPaginate': true
Also you should enable bProcessing with large amount of data:
'bProcessing':true
Use server side processing for faster speed, with an external .php file:
'bServerSide':true
'sAjaxSource': 'your_external_get_data.php'
Check out the documentation for more info: http://legacy.datatables.net/usage/features