friend please help me...
i am facing problem regarding data table sorting when i click on sort button in asc its show some rendom id like first row id is 20 second row is 18 like that
var dataTable = $('#users').DataTable( {
"bProcessing": true,
"aLengthMenu": [[10,25,50,1000000,], [10,25,50,"All",]],
"bProcessing": true,
"serverSide": true,
"language": {
searchPlaceholder: "Enter Card Number"
},
"dom": 'lfrtip',
"ajax":{
url :"response.php",
type: "post",
}
Are you using serverside sorting? if yes then make sure the field which you want sorting must be INT datatype or relevant to numeric datatype in database.
Related
I'm fresh, but I'm learning with the help of people like you :). I need to do a table on my site that will display sorted data by type and pagination. I thought to use this solution: https://legacy.datatables.net/examples/data_sources/server_side.html
But honestly, I do not know how to do this. Can someone give an example along with html how to do it? Or suggest a different solution?
First of you need to import some of the necessary files:
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
CSS :
<link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet">
Then using the id attribute of the table you have created use the following code :
var table = $('#myTable').DataTable(); // this creates a table object of the DataTable class
// myTable is the id of the table you have created
table.clear().draw();
table.destroy();
$.ajax({
url: 'abc.php',
type: 'POST',
data: {value:value},//value you want to send to backend
dataType: 'json',
success:function(result){
$('#myTable').DataTable( {
"pageLength": 10, // does pagination providing 10 records per page
"destroy": true,
"language": {
"zeroRecords": "No Data Found",
"infoEmpty": "No Data Found",
},
"ajax": "objects.txt",
// Data from backend is sent to objects.txt file in JSON format
"columns": [
{ "data": "Key value from backend for 1st column in table" },
{ "data": "Key value from backend for 2nd column in table" },
{ "data": "Key value from backend for 3rd column in table" },
{ "data": "Key value from backend for 4th column in table"},
{ "data": "Key value from backend for 5th column in table" },
{ "data": "Key value from backend for 6th column in table" }
]
});
},
error: function (xhr, ajaxOptions, thrownError) {
alert("readyState: "+xhr.readyState+"\nstatus: "+xhr.status);
alert("responseText: "+xhr.responseText);
}
});
You could import more datatable javascripts that can provide more functionality such as conversion of table data to pdf or export as an excel file using button datatable javascripts. You can find more related information here : https://cdn.datatables.net/
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?
I know above error is explain here " LINK "
All is working fine in my local-host thats no error popup , nothing in my local-host.
But on my online server i am getting above link error : i am not getting what and where is wrong as when i refresh my page after error then i get data properly .
It works for some time and then again start giving me error and again after refresh of page , error is not seen and my table list all data properly .
I check my all MySQL query on my server its working properly and fine.
var oTableL1 = $('#table1').dataTable({
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "includes/db/list_db.php",
"fnServerParams": function ( aoData ) {
aoData.push( { "name": "more_data", "value": "tablequeryone" } );
// aoData : passing parameter in my list_db.php where
i have used if else-if code for resp. which is working fine
in my local-host, also on server after refresh
}
});
var oTableL2 = $('#table2').dataTable({
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "includes/db/list_db.php",
"fnServerParams": function ( aoData ) {
aoData.push( { "name": "more_data", "value": "tablequerytwo" } );
}
});
var oTableL3 = $('#table3').dataTable({
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "includes/db/list_db.php",
"fnServerParams": function ( aoData ) {
aoData.push( { "name": "more_data", "value": "tablequerythree } );
}
});
ONLINE SERVER : IF I REFRESH MY PAGE then some time it get my data properly but some time its show me error , but after refresh of page it show me data properly without any error .. not getting what wrong.
same thing is happening for search and pagination and records list .
Since you are getting output on random refresh it has to do with the data table initialization and assignment of data. There are multiple scenarios that can lead to above error;
If data is being assigned to grid prior to element is registered in DOM
Data table is being initialized multiple times when its already available in the DOM
Solution; Clear the table and reassign the data.
Data mist match (in short grid contains columns; Col1, Col2, Col3 while table array is
not of same length)
As per the document here ,i have implemented the server side code.
JS code
$('#datatable_paging').dataTable({
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "#### my php file path ####",
});
I am getting JSON data as
{
"sEcho": 0,
"iTotalRecords": 19,
"iTotalDisplayRecords": "19",
"aaData": [
["1", "peter", "peter#gmail.com"],
["2", "john", "john#yahoo.com"],
["3", "raj", "raj#in.com"],
["4", "selvin", "selvin#gmail.com"],
["5", "ismail", "ismail#gmail.com"],
["6", "muadth", "muad#hotmail.com"],
["7", "ahmed", "ahmed#gmail.com"],
.....
]
}
Now i need to display this JSON result in below table with Datatable pagination
HTML code
<table id="datatable_paging">
<thead>
<tr>
<th>Id </th>
<th>Name</th>
<th>E-mail</th>
</tr>
</thead>
</table>
People answering this are overthinking this way too much. Datatables will handle the output without any fancy looping/assigning/etc when you set the options correctly. Assuming your JSON return is proper as described in the spec:
HTML:
<table id="datatable_paging"></table>
Then the jQuery:
var oTable = $('#datatable_paging').dataTable( {
"bDestroy":true,
"bStateSave": true,
"aaSorting": [[1, "asc"]],
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "#### my php file path ####",
"bJQueryUI": true,
"bAutoWidth": false,
"bFilter":true,
"bLengthChange": true,
"bPaginate": true,
"bSort": true,
"iDisplayLength": 10,
"bInfo": true,
"sPaginationType": "full_numbers",
"aoColumns": [
{ "sTitle": "Id", "sWidth": "33%"},
{ "sTitle": "Name", "sWidth": "33%"},
{ "sTitle": "Email", "sWidth": "33%"}
]
})
The paging, etc is going to be setup properly, assuming that your PHP source is correctly filtering as it should. If, for example, you find that you're getting 19 results when you should be getting 10, you'd know that the problem is at your source, not here in the jQuery. In your example, the source says it's returning 19 total result out of 19 and bPaginate hasn't been specified, so that would be why the paging isn't working. aoColumns setups your head, no need to do in HTML unless you really want to. The other functions are well-documented on the datatables site, though ask questions if you're confused.
You could just loop though the 'aaData' and add a new row directly with fnAddData.
Check here for example: http://datatables.net/examples/api/add_row.html
Edit: A example for you as well.
var aaData = theVariableHoldingTheJsonObject.aaData;
$("#datatable_paging").dataTable().fnAddData ( aaData )
That's basically it
It seems like you should send back a correct "sEcho" variable in JSON.
It is information that DataTables needs to know about the data being sent back, in order to be able to render. You need to pass back to DataTables the value that was sent.
sEcho is described here: http://datatables.net/usage/server-side
So to get your example works change "sEcho" to 1 or better write like this:
"sEcho": int(request.vars['sEcho']) #python code
I'm using DataTables with pipelining. I works great except when I tried to enter an extra column to hold "edit" links. See this table.
Here is a snippet of server_processing.php showing the columns:
/* Array of database columns which should be read and sent back to DataTables.
* Use a space where you want to insert a
* non-database field (for example a counter or static image)
*/
$aColumns = array( 'user','email', );
And here is the clientside:
$(document).ready( function (){
$('#example').dataTable({
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": "scripts/server_processing.php",
"fnServerData": fnDataTablesPipeline,
aoColumns: [null, null, {"bSortable": false}]
}).makeEditable({
sUpdateURL: "UpdateData.php",
sAddURL: "AddData.php",
sAddHttpMethod: "POST",
sDeleteURL: "DeleteData.php",
sDeleteHttpMethod: "POST",
aoColumns: [ { } , { } , null ]
});
});
So, why isn't this working?
Just done this exact same thing myself. I like to configure all my columns using aoColumnDefs, as you can add multiple configuration options for columns in one go.
// Disable sorting on the 3rd column
'aoColumnDefs': [{'aTargets': [2], 'bSortable': false}]
Note that aTargets is an array of column indexes you want to apply those settings to. So if you were to add more link columns (e.g. a Delete link), you can turn off sorting on those without rewriting the column definition every time.
// Disable sorting on the 3rd and 4th column
'aoColumnDefs': [{'aTargets': [2,3], 'bSortable': false}]
And, as I was saying, you can add further configuration options for columns in this same array:
// Disable sorting on the 3rd and 4th column and sort 1st column by string
'aoColumnDefs': [
{'aTargets': [2,3], 'bSortable': false}
{'aTargets': [0], 'sType': 'string'}
]