I just included some logging into my application. For testing purpose, I filled the database with some test values (basically the same row over and over again, about 27k rows..).
Now I wanted to print the data on a view, doing this:
<table id="chatLogs">
<thead>
<tr>
<th>ID</th>
<th>Message ID</th>
<th>User Agent</th>
<th>IP:Port</th>
</tr>
</thead>
<tbody>
<?php
foreach($chatlogs as $log){ ?>
<tr>
<td><?=$log['ID'];?></td>
<td><?=$log['messageID'];?></td>
<td><?=$log['userAgent'];?></td>
<td><?=$log['IP'];?></td>
</tr>
<?php }
?>
</tbody>
</table>
$log is a variable I'm getting using the Database-Interface called Medoo.
Additionally, I included jQuery DataTables for better and sortable tables.
<script>
$(document).ready( function () {
$('#chatLogs').DataTable({
dom: 'Bfrtip',
buttons: [
'copy', 'excel', 'pdf'
]
});
} );
</script>
Now, until everything is done and the page is fully loaded, it takes about 15 seconds (with the 27k test-rows).
I just tested the same query directly on the database, and it takes 0.02 seconds, so its definetely about the PHP, not about the SQL.
And it seems like echoing everything in the table takes some time, as well as "loading it into DataTables"...
Now the question is: Is it possible to have it loading faster or instantly, and load the data, when its needed? I mean like only load the data into JSON and not echoing everything first (which is the longest part)? Because in the table, there are only 10 rows first anyway, and everytime I click on the next page, it could render it. Ofcourse though, all data would still need to be available for search.
Any ideas?
You could improve the loading time by loading only a set of records at a time using limit $start $stop to improve performance using php and sql or you could use "iDisplayLength", property of DataTable to do so.
I am using dyna table with Ajax. Sorting, searching, pagination nothing is working. I only get a list in my table but on clicking the column header nothing happens.
Please help.This is my code.
My html file is
<table style="width:100%" id="my-final-table" class="tablesorter" >
<thead>
<tr bgcolor="#239B56">
<th><font style="color:#fff">Rollno</font></th>
<th><font style="color:#fff">Name</font></th>
<th><font style="color:#fff">Marks</font></th>
<th><font style="color:#fff">Percentage</font></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
My Ajax code is
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="/jquery.dynatable.js"></script>
<style src="/jquery.dynatable.css"></style>
<script type="text/javascript">
$(document).ready(function()
{
$('#my-final-table').dynatable({
dataset: {
ajax: true,
ajaxOnLoad: true,
ajaxUrl: '/result_analysis_subject_json.json',
records: []
}
});
});
</script>
And my JSON file is
{"records":[{"rollno":"1","name":"Aditya Kumar Sharma","marks":"12.00","percentage":40},{"rollno":"2","name":"Aksh Kathuria","marks":"19.00","percentage":63},{"rollno":"3","name":"Anant ","marks":"14.00","percentage":47},{"rollno":"4","name":"Arnav Arora","marks":"28.00","percentage":93},{"rollno":"5","name":"Ayush Sai Raina","marks":"26.00","percentage":87},{"rollno":"6","name":"Ayush Rawat","marks":"21.00","percentage":70},{"rollno":"7","name":"Bhagya Dua","marks":"11.00","percentage":37},{"rollno":"8","name":"Bhvesh Gautam","marks":"26.00","percentage":87},{"rollno":"9","name":"Chaitanya Dubey","marks":"18.00","percentage":60},{"rollno":"10","name":"Chanchal","marks":"5.00","percentage":17},{"rollno":"11","name":"Deeksha","marks":"28.00","percentage":93},{"rollno":"12","name":"Dimple Bhatia","marks":"26.00","percentage":87},{"rollno":"13","name":"Ekta Yadav","marks":"27.00","percentage":90},{"rollno":"14","name":"Eshan Sharma","marks":"24.00","percentage":80},{"rollno":"15","name":"Harman Arora","marks":"13.00","percentage":43},{"rollno":"16","name":"Himanya ","marks":"18.00","percentage":60},{"rollno":"17","name":"Hiya Bhatia","marks":"29.00","percentage":97},{"rollno":"18","name":"Ishmeet Kaur","marks":"13.00","percentage":43},{"rollno":"19","name":"Jivitesh Gwadi","marks":"20.00","percentage":67},{"rollno":"20","name":"Jiya Hussain","marks":"7.00","percentage":23},{"rollno":"21","name":"Krish Kohli","marks":"13.00","percentage":43},{"rollno":"22","name":"Krishna Sharma","marks":"22.00","percentage":73},{"rollno":"23","name":"Lisha Kapoor","marks":"27.00","percentage":90},{"rollno":"24","name":"Mannant Sehgal","marks":"20.00","percentage":67},{"rollno":"25","name":"Mayank Mehta","marks":"19.00","percentage":63},{"rollno":"26","name":"Mehak Singh","marks":"26.00","percentage":87},{"rollno":"27","name":"Nandini Bhargava","marks":"29.00","percentage":97},{"rollno":"28","name":"Parth Talwar","marks":"27.00","percentage":90},{"rollno":"29","name":"Pawni Yadav","marks":"27.00","percentage":90},{"rollno":"30","name":"Prachi Dahiya","marks":"21.00","percentage":70},{"rollno":"31","name":"Prachi Sharma","marks":"18.00","percentage":60},{"rollno":"32","name":"Rashi Bainsla","marks":"19.00","percentage":63},{"rollno":"33","name":"Ravinder Singh","marks":"5.00","percentage":17},{"rollno":"34","name":"Riya Sethi","marks":"14.00","percentage":47},{"rollno":"35","name":"Sahib Kharbanda","marks":"24.00","percentage":80},{"rollno":"36","name":"Sajal Kukreja","marks":"23.00","percentage":77},{"rollno":"37","name":"Shrishty Singh","marks":"26.00","percentage":87},{"rollno":"38","name":"Tanisha Kaur","marks":"26.00","percentage":87},{"rollno":"39","name":"Toshiv Mudgal","marks":"16.00","percentage":53},{"rollno":"40","name":"Yash Anand","marks":"23.00","percentage":77}],"queryRecordCount":40,"totalRecordCount":40}
From what i can read from the documentation , the sorting, searching, and paginating needs to be done on the server side
NOTE: When using AJAX to load data, operations such as sorting, searching, and paginating are performed on the server before building the returned JSON. This example has these features disabled since, we're just loading a static JSON file for the purposes of documentation.
When using Dynatable in "AJAX mode" (dataset.ajax = true), delegates all operations (pagination, sorting, and querying/filtering) to the server. For each operation, dynatalbe culls the parameters (sort, search, page) into an AJAX request and fetches the results from dataset.ajaxUrl (if this setting isn't set, it will send an AJAX request to the URL of the current page).
more info
in the ajax call
records: function myFunction(rec){}
perform your js library code in myFunction on rec
I wrapped a Bootstrap (BST) table with a Form element. The BST populates the table data with a json file automatically in Javascript on client side, and the table and form look like this:
<form id="info" role="form" action="#" method="post" accept-charset="utf-8">
<table data-toggle="table"
data-url="tables/sharedMem/jsonTickerList"
data-show-refresh="true"
data-show-toggle="true"
data-show-columns="true"
data-search="true"
data-select-item-name="toolbar1"
data-pagination="true"
data-sort-name="name"
data-sort-order="desc"
data-page-size="15"
data-single-select="true"
id="table">
<thead>
<tr>
<th data-field="state" data-radio="true" >Report ID</th>
<th data-field="cik" data-sortable="true">CIK</th>
<th data-field="ticker" data-sortable="true">Ticker</th>
<th data-field="company" data-sortable="true">Name</th>
</tr>
</thead>
</table>
<button type="submit" class="btn btn-small" name = "button">
Submit
</button>
</form>
As you can see, the BST DOES NOT define the table rows or TD's on the server side (because its client side JS enabled). So the only way to capture data that I can find to return row data with the click of a submit button in the form is:
$(function () {
$('#events-table').next().click(function () {
$(this).hide();
var $result = $('#result');
$('#table').bootstrapTable({})
.on('click-row.bs.table', function (e, row, $element) {
$result.text('Event: click-row.bs.table, data: ' + JSON.stringify(row));
var url = "confirm.php?cik=" + row.cik;
document.getElementById("info").setAttribute('action', url);
});
});
});
The two lines above work fantastic. They make it all work.
My problem is that the BST code has a message element needed. It looks like this:
<div class="alert alert-success" id="result" ></div>
When this alert is in the code, the table will not send events to the alert object unless I click the alert first, then click the row in the table. Without the alert in the code, I can't get anything to work. Once I do the preemptive click everything works great, but that is weird. I hope someone can see what is wrong. I'm just too lame with Javascript.. I would hope I could just load the page, click a row, and the JS updates the action attribute in the form element so that when I click the submit button then all is ok.
The BST is great! I can load 10000 records into the table from /dev/shm in about 100 milliseconds and its search feature just is screaming fast so I hope to just debug this last bit so it's a smoother customer experience.
I worked on the problem and found a solution. The correct javascript now is:
$(function () {
$('#events-table').click(function () {
$('#table').bootstrapTable({})
.on('click-row.bs.table', function (e, row, $element) {
var url = "confirm.php?cik=" + row.cik;
document.getElementById("info").setAttribute('action', url);
});
});
});
the HTML:
<div class="alert alert-success" id="result" > </div>
is completely deleted too. Net result is when the table loads, it is fully navigable via pages or search. clicking a row, (or radio button with a minor change) captures the row data so that when you click the Form Submit button, the form data created using client side javascript and json is passed into php's $_POST in the normal way.
I just tested the table with 1.1 million records (3 fields each). It loads in under a second and you can navigate to the last row in 1/2 second. While thats on a 1 Gb intranet, and the data file is 77MB on the test, I think it shows the BST is pretty cool, looks fantastic, and is pretty fast when you store the large json file on /dev/shm, too. All the Form and BST html mentioned previously is correct.
Key to this was removing the "next()" method in the JS since it was effectively ignoring the first click on the table row that I wanted to select. I just guessed that JS would accept ".click" instead...that turned out correct...after a fair number of trial and error mistakes.