Related
I'm moving my application to new server, and have been hitting into some issues lately.
PHP version: 5.5.34, Mac OSX Apache 2.4
Laravel version: 4.2
I get a grid but my browser complains for URL.
My ajax requests looks like:
$(grid_name).jqGrid({
//to get this function working make sure you've .htaccess file
//url:'illumina_xhr_get_data', - won't work if not added illumina
url:"illumina/illumina_xhr_get_samples",
//url:"illumina/illumina_xhr_get_samples",
datatype: "json",
mtype: "GET",
jsonReader: {
repeatitems: false,
id: "",
root: function (obj) {
return obj;
},
records: function (obj) {
return obj.length;
},
page: function () {
return 1;
},
total: function () {
return 1;
}
},
colNames:['Study','Sample Name','Forward Primer',
'Reverse Primer','Region','Read Length','Seq Platform', "ID"], //id is hidden.. that is used while making group
colModel :[
{name:"study_name",sortable: true},
{name: "sample_name",sortable: false},
{name: "forward_primer",sortable: false},
{name: "reverse_primer",sortable: false},
{name:"region",sortable:false},
{name:"read_length",sortable:false,align:'right'},
{name:"seq_platform",sortable:false},
{name:"id",sortable:false,hidden:true}
],
rowNum:10, //this sets the default row in the pager
caption:"Illumina", //title of the grid
pager: pager_name,
shrinkToFit : false,
rownumbers: true, //row numbers on left
multiselect: true, //check box
height: '400', //height: 'auto',
width: '1100',
gridview: true,
viewrecords:true, // this is for the View 1 - 8 of 8 \m/
sortorder:"asc", //asc
autoencode: true, //don't know
sortable:true, //sort
loadonce: true, //loadonce is must
rowList:[500,1000,1500], //drop down
page: 1,
rowNum: 100,
ignoreCase: true, //make search as case insenstive -- YAY.. Party
grouping:true, //this is for grouping
groupingView : { groupField : ['study_name'], //grouping based on study column
groupText : ['<b>{0} - {1} Sample(s)</b>'] //this will give count of samples present
} ///grouping view ends
});
`
Error:
The requested URL /pims/public/illumina/illumina_xhr_get_samples was not found on this server.
My local host points to ~/Sites
The same code works on my other machine (from which I'm transitioning).
I'm unable to figure out a solution to this. Kindly help.
I found the solution from: .htaccess: Invalid command 'RewriteEngine', perhaps misspelled or defined by a module not included in the server configuration
I'd to enable re-write module in order to be it read by server.
I found error in /var/log/apache2/error_log
Hope it helps someone. Thank you.
I've have many processes using the same data that gets regular updates while a user is on a page. Now I want to use datatables to show this data.
I also use the ColReorder plugin.
The problem is that I don't understand how I can force datatables to 'reload' this local var with new data.
there is is also a bunch of definitions in the "aoColums" setting, using some of the datafields for images and so on.
I changed some of the data in the dat var. The tried to force datatables to put it in the table. No luck. I can't find a decent example or function in the api to use.
if I try to use oTable.fnClearTable() and the oTable.fnAddData(data) the data gets loaded, but somehow the ColReorder is not aplied.
myTable = $('#myTable').dataTable({
"aoColumns": [ ... ],
"aaSorting": [[1, 'asc']],
"aaData": data,
"sScrollY": 200,
"sScrollX": "100%",
"sScrollXInner": "150%",
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"sDom": 'R<"H"lfr>t<"F"ip>',
"iFixedColumns": 3,
"oColReorder": {
"aiOrder": [ 0, 8, 2, 3, 4, 5, 6, 7, 1, 9 ]
}
});
Any ideas?
EDIT
I've made a working jsFIddle with the whole problem explained. Take a look and have a go!
I read about your problem....i take another approach to your problem(it's always about dom manipulation xD)...my anwer it's not the smartest, but i think it works.
I put datatables manipulation inside a function, and add a div no the table
Then i call that function
On update i empty the div and add the same html that table have before datatbles manipulation and fill
Then a call the function to draw the whole datatables again, in that way ColReorder plugin works with the updated data.
PS: Here is the updated fiddle for more details : http://jsfiddle.net/aKuHM/5
Now the table looks like this:
<div class="Example" id="Example">
<table id="myTable" class="datatable">
<thead>
</thead>
<tbody>
</tbody>
<tfoot>
</tfoot>
</table>
</div>
And your JS its loading on the head and looks this way:
data = [
['cell1', 'cell2','cell3','cell4','cell5','cell6','cell17', 'cell8', 'cell9', 'cell10'],
['cell1', 'cell2','cell3','cell4','cell5','cell6','cell17', 'cell8', 'cell9', 'cell10'],
['cell1', 'cell2','cell3','cell4','cell5','cell6','cell17', 'cell8', 'cell9', 'cell10'],
];
function Saludos(){
$(function(){
myTable = $('#myTable').dataTable({
"aoColumns": [
{"sTitle":"col0", "bSearchable": false, "bVisible": true},
{"sTitle":"col1", "bSearchable": false, "bVisible": true},
{"sTitle":"col2", "bSearchable": true, "bVisible": true},
{"sTitle":"col3", "bSearchable": true, "bVisible": true},
{"sTitle":"col4", "bSearchable": true, "bVisible": true},
{"sTitle":"col5", "bSearchable": false, "bVisible": true},
{"sTitle":"col6", "bSearchable": true, "bVisible": true},
{"sTitle":"col7", "bSearchable": false, "bVisible": true},
{"sTitle":"col8", "bSearchable": true, "bVisible": true,
"mRender": function (data, type, row){
return '<b><i>'+ row[8] +'</i></b>';
}
},
{"sTitle":"col9", "bSearchable": false, "bVisible": false},
],
"aaSorting": [[8, 'asc']],
"aaData": data,
"sScrollY": 200,
"sScrollX": "100%",
"sScrollXInner": "150%",
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"sDom": 'R<"H"lfr>t<"F"ip>',
"iFixedColumns": 3,
"oColReorder": {
"aiOrder": [ 0, 8, 2, 3, 4, 5, 6, 7, 1, 9 ]
}
});
$('#updatebutton').click(function(){
updateTable();
});
});
}
Saludos();
function updateTable(){
data[1][8] = "even bolder";
$('.Example').empty();
$("#Example").html("<table id='myTable' class='datatable'><thead></thead> <tbody></tbody><tfoot></tfoot></table>");
Saludos();
console.log(data);
}
JqGrid documentation states the following regarding postData:
an array used to add content to the data posted to the server
And that's it. So, I'm using postData to send a variable to my PHP so that I can use a switch case to call the function I want.
This allows me to have a single PHP page containing all the functions for my project. I want to do the same thing with editData so I don't need a PHP page for every inline editing function associated with the project.
However, editData doesn't seem to be passing to the PHP page. I tried printing the POSTed variables to a file and they were empty. Suggestions?
Note: I am aware of the editData bug, but this should have been fixed by version 4.4.4 which is the one I'm using
$("#list").jqGrid({
url:'functions.php',
datatype:'xml',
mtype:'POST',
postData: {
action:'popGrid',
sqlCount:sqlCount,
sqlSelect:sqlSelect,
sqlSelect2:sqlSelect2,
label1:label1,
label2:label2,
},
colNames:['Label','Account_Num','Amount', 'Type Code', 'Record Code', 'Sequence'],
colModel :[
{name:'label', index:'label', width:150, align:'center', sortable:false, editable:true},
{name:'cntrct_id', index:'cntrct_id', width:150, align:'center', sortable:true},
{name:'amount', index:'amount', width:150, align:'center', sortable:false, editable:true},
{name:'type_cd', index:'type_cd', width:150, align:'center', sortable:false, editable:true},
{name:'rec_cd', index:'rec_cd', width:150, align:'center', sortable:false},
{name:'db_seq', index:'db_seq', width:150, align:'center', sortable:false},
],
editurl: 'functions.php',
extraparam: { action: function(){ return 'grdAdjust'; } },
onSelectRow: function(id) {
if(id && id!==lastSel) {
jQuery('#list').restoreRow(lastSel);
jQuery('#list').editRow(id,true);
lastSel=id;
}
},
pager: '#pager',
rowNum:100,
rowList:[100,200,300,400,500,600,700,800,900,1000],
sortname: 'cntrct_id',
sortorder: 'desc',
viewrecords: true,
caption: 'Adjustments'
});
The option editData play the same role in form editing as postData in the main grid. On the other side you wrote about "inline editing" in the text of your question. In the case you should use extraparam option instead (see the documentation). If you need to have common options of inline editing then probably the usage defalut settings in $.jgrid.inlineEdit could be helpful for you. You don't posted any code and I am not sure which editing mode and in which way you use, so I can't include more examples of usage editData, extraparam etc.
UPDATED: You use extraparam in a wrong way now. extraparam is not jqGrid option, it's option of editRow. Correct usage could be about the following:
onSelectRow: function (id) {
if (id && id !== lastSel){
$(this).jqGrid("restoreRow", lastSel);
$(this).jqGrid("editRow", id, {
keys: true,
extraparam: {
action: function () {
return 'grdAdjust';
}
}
});
lastSel = id;
}
}
If you need post constant value of action you can use simplified form of extraparam: like extraparam: {action: 'grdAdjust'}. The usage of functions is really helpful if you need return the value of some variable or some element from the page which will be changed between different calls of editRow.
Additionally I would recommend you to include gridview: true option of jqGrid and to simplify colModel which you use. If index has the same value as name you can emit it. The default value of width is already 150, so you don't need specify width:150 too. If you want use align:'center' in all or in the most columns you can change the default value of align for the grid by including cmTemplate: {align:'center'} option in the grid. Because the most column has sortable: false you can include the setting in the cmTemplate too. As the result you can reduce colModel to the following:
colModel: [
{name: 'label', editable: true},
{name: 'cntrct_id', sortable: true},
{name: 'amount', editable: true},
{name: 'type_cd', editable: true},
{name: 'rec_cd'},
{name: 'db_seq'},
],
cmTemplate: {align: 'center', sortable: false},
Such changes simplify the code not only for reading, but for maintain too. See here more information about column templates.
I sort the data in the table by ORDER BY in SQL request. But when I apply DataTables on my table, it changes the sorting completely...I got "bSortable":false in all columns...Does anybody know what is causing this? :( The DataTable code looks like this:
oTable = $('#tabulkaKalk').dataTable({
"bJQueryUI": true,
"sDom": '<"H"f>rtS<"F"i>',
"sScrollY": iHeight,
"bFilter": false,
"bAutoWidth": true,
"bPaginate": false,
"bRetrieve":true,
"aoColumns": [
{ "sType": "czech", "bSortable":false },
{ "sType": "natural", "bSortable":false },
{ "sType": "natural", "bSortable":false },
{ "sType": "natural", "bSortable":false }
]
});
I've been looking around on the net for hours about this save scroll position for DataTables, but without any luck. At least not for my case.
According to datatables, to save the state of the scrollbar I need this line of code:
$(document).ready(function() {
var oTable = $('#example').dataTable( {
"sScrollY": "200px",
"sAjaxSource": "media/data/2500.txt",
"sDom": "frtiS",
"bDeferRender": true,
"bStateSave": true
} );
} );
But since I'm not having any text file with the data which I can parse it's not working. I'm fetching arrays in the table with PHP and MYSQL.
The "bStateSave": true does save every user input like filtering and sorting, except for the scrollbar.
Does anyone know how to solve this?
EDIT
Ok somehow I managed to get this working. It seems I had something on true, which shouldn't be. Now, with this "sDom" the savestate of scrolling works, but my GUI is gone...
EDIT
My initiation code is:
<!-- DATATABLES ENABLE INIT -->
<script>
<?php include ('js/datatables/ordernumhtml.js');?>
<?php include ('js/datatables/ordercurrency.js');?>
<?php include ('js/datatables/dataTables.scroller.min.js');?>
$(document).ready( function () {
$('#table1').dataTable( {
"sDom": "frtiS",
"bDeferRender": false,
"bStateSave": true,
"bAutoWidth": true,
"bInfo": true,
"sScrollX": "100%",
"bScrollCollapse": true,
"bScrollAutoCss": true,
"bScrollInfinite": false,
"sScrollY": "350px",
"bJQueryUI": true,
"bProcessing": true,
"aoColumns": [
{ "sType": "num-html" },
{ "sType": "numeric" },
null,
null,
null,
null,
null,
null,
{ "sType": "currency" },
null,
{ "bSortable": false }
]
} );
} );
</script>
And the solution was to rewrite the line:
"sDom": "frtiS", to:
"sDom": '<"H"fr>t<"F"iS>',
The "H" and the "F" represents the header and the footer for the jQueryUI.
A detailed description of the sDOM usage can be found here:
http://datatables.net/usage/options#sDom
The solution to save the scroll state is to set stateSave to true. To make this work one also needs to use dataTables.scroller.js
$(document).ready(function() {
$('#example').DataTable( {
ajax: "data/2500.txt",
deferRender: true,
dom: "frtiS",
scrollY: 200,
scrollCollapse: true,
stateSave: true
} );
} );
Check this : Scroller State Saving