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.
Using a server call the user of my web application is creating a json object d. This object contains numerous keys (think of "Mean", "Stdev", etc.). The user is changing the underlying timeseries on a webpage.
<script type="text/javascript">
function myFunction(d) {
$('#myid').html(d["Mean"])
}
</script>
An jquery $.POST is executed and if successful returns the json object and calls the method above.
The above scheme works already. This updates
<div class="container-fluid">
<div class="row-fluid">
<div id="myid">some value</div>
</div>
</div>
However, I would really like to update a complete datatable (datatable as in http://datatables.net/examples/advanced_init/).
At runtime I don't know what key are in d. Is datatables.js the right tool for dynamic data in a table?
Yep, that is what dataTables.js was made for.
Although it is unclear what you mean exactly with datatable, table and dataTable.
dataTable.js is responsible for the display (rendering) of a table like structure on your page with lots of functionality (like sorting, searching, filtering, pagination, editing etc.) that would otherwise be very difficult to achieve. It is not a tool that helps you to maintain the field in a table (or datatable) of your DB. (But it can be)
dataTable.js uses server sided code with some cleverly helper functions to help you to use a mySql database via PHP. But it does not rely on this examples. You can use any serversided code and any database as long as it understands the query that is sent from dataTables.js and resturns the json-data that dataTables.js expects.
For complex (DB)-table manipulation you need to write your own server sided code.
Regarding your question I guess you should have a look at the serversided examples that come with dataTables.js.
For getting individual values of cell or row values on the actual page the user sees you should look at the column rendering examples.
Don't regard this as an Answer, it is just to lengthy for a comment. Be prepared that using dataTables.js is way different from the working code of your question.
Here's a fragment of the code. It works actually now. However, I find the concept (removing content and adding row-wise) super dodgy:
<div class="col-md-3">
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th></th>
<th>Value</th>
</tr>
</thead>
</table>
</div>
<script type=text/javascript>
$SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
$TABLE = $('#example').DataTable({
"info": false,
"bPaginate": false,
"paging": false,
"bScrollCollapse": false,
"search": false,
"sort": false,
"filter": false}
);
</script>
<script type="text/javascript">
function myFunction(d)
{
console.log("Refill table");
console.log(d);
$TABLE.clear();
for (var key in d) {
$TABLE.row.add([key, d[key]]);
}
$TABLE.draw();
}
</script>
Please note that I have not included the code for the computation of d (done on the server with a $.ajax POST call.