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');
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);
}
Happy Evening All,
I am trying to add formatting to the data that was collected in MySql and display with its corresponding array value.
MySql
name, age, gender (1=M, 0=F)
Max, 18, 1
Current DataTable Display
Max, 18, 1
DataTable (desired version)
Max, 18, M
How to add array to datatable serverside php. Also tried using Formatter - unable to get the desired display. Any help would be greatful.
something tried at my end does't work.
array( 'db' => 'gender', $arrayName('dt') => 8 ),
Thanks,
you can define each column :
$('#table').DataTable({
"columns": [
{
"title": "gender.",
"data": "gender",
"render": function (data, type, row) {
return data ? "M" : "F";
}
}
]
});
Complete Working solution :)
<script type="text/javascript">
$(document).ready(function() {
var genderValue = [
"Female", //0
"Male", // 1
];
$('#example').DataTable( {
"processing": true,
"serverSide": true,
"ajax": "scripts/server_processing.php",
"columns": [
{ data : gender,
render: function (data, type, row) {
return genderValue[data]
}},
]
} );
} );
</script>
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?
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 have list of links in one page which is dynamically created. I want to do when I click on one link another page will be open and according to link id which is i am sending the data will be fetch from database and load into a pagination ext data grid.
Bellow in my Javascript code
var extGrid = null;
var center_data_store=null;
var exam_id = null;
Ext.onReady(function(){
// create the data store
exam_id = document.getElementById("hdnExamId").value;
//I am getting id from one hidden field.
//alert(exam_id);// Id is coming.
multiple_choice_all_data_store = new Ext.data.JsonStore({
totalProperty: 'total', // total data, see json output
root: 'results', // see json output
url: 'multiple_choice_all_data_grid.php"?exm_id="+exam_id',
//in above url I am passing data.
fields: [
{name: 'OEXM_Id', type: 'int'},
'OEXM_txtareaQuestion','OEXM_rbtnOption','OEXM_txtOption1','OEXM_txtOption2','OEXM_txtOption3','OEXM_txtOption4','OEXM_txtExamId','OEXM_txtExamName'
]
});
// load data from the url ( data.php )
multiple_choice_all_data_store.load({params:{start: 0, limit: 15}});
// create the Grid
var multiplechoicealldataGrid = new Ext.grid.GridPanel({
store: multiple_choice_all_data_store,
columns: [
new Ext.grid.RowNumberer(),
//{header: 'ID', width: 30, sortable: true, dataIndex: 'OEXM_Id',hidden:false},
{header: 'Question', width: 300, sortable: true, dataIndex: 'OEXM_txtareaQuestion',hidden:false},
{header: 'Answer', width: 100, sortable: true, dataIndex: 'OEXM_rbtnOption',hidden:false},
{header: 'Option1', width: 100, sortable: true, dataIndex: 'OEXM_txtOption1',hidden:false},
{header: 'Option2', width: 100, sortable: true, dataIndex: 'OEXM_txtOption2',hidden:false},
{header: 'Option3', width: 100, sortable: true, dataIndex: 'OEXM_txtOption3',hidden:false},
{header: 'Option4', width: 100, sortable: true, dataIndex: 'OEXM_txtOption4',hidden:false}
],
stripeRows: true,
height:470,
width:792,
title:'All Multiple Choice Question Information',
bbar: new Ext.PagingToolbar({
pageSize: 15,
store: multiple_choice_all_data_store,
displayInfo: true,
displayMsg: 'Displaying Records {0} - {1} of {2}',
emptyMsg: "No topics to display"
})
});
My problem is I am not able to get ID value in my PHP Page.
Try change url in the store definition to 'multiple_choice_all_data_grid.php?exm_id='+exam_id
Then your id should be available in PHP in $_GET['exm_id'] variable
To get a element in ExtJS:
exam_id = Ext.getCmp("hdnExamId").getValue();
The getValue() method is used to retrieve the value of the element.
Edit:
Also fix the url #Lolo is pointing out.