I'm trying to fetch big amounts of data from a MySQL-database. Therefore I don't want the user to fetch all data at once, cause this could potentially break the DB-server. Yet when I set the jQuery Datatable options, it doesn't seem to be affected by the DisplayLength I set. When I change the amount of items to show, the box and the pagination at the bottom do change, yet the data remains the same.
I've tried to add an invisible field at the and of the columns, which seemed to help in the past. For this problem it didn't though.
$.post("index.php?action=getDataStructurePropsFromSensorId", {
sensorId : sensorId
}, function(data) {
dataProps.push({ "mDataProp": "data_entry_id" });
data.forEach(function (item, i) {
var th = i;
$('#data-th-'+th).html(item['struct_property_label']);
$('.data-th').each(function () {
if ($(this).html() == '') {
$(this).hide();
} else {
$(this).show();
}
});
dataProps.push({ "mDataProp": "data_value_"+i.toString(), "bSortable": false,"bSearchable": false});
});
dataProps.push({ "mDataProp": "data_entry_created_at", "bSortable": false, "bSearchable": false });
dataProps.push({ "mDataProp": "data_entry_id", "bVisible": false });
var obj2 = {
"bStateSave": true,
"bProcessing": true,
"bRetrieve": true,
"bServerSide": true,
"sAjaxSource": "index.php?&action=getSensorData&sensor_id="+sensorId+"&from="+from+"&till="+till,
"iDisplayLength": 5,
"aLengthMenu": [[5, 10, 25, 50, 100, 200], [5, 10, 25, 50, 100, 200]],
"aoColumns": dataProps,
"fnRowCallback": function( nRow, aaData, iDisplayIndex ) {
return nRow;
},
"aaSorting": [[0, 'asc']],
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"fnInitComplete": function (oSettings, json) {
},
"fnDrawCallback": function () {
}
};
oDataTableOverview = $('#sensor_data_dt').dataTable(obj2);
}, "json");
I'm expecting 5 records, depending on the page and the selection in the pagination amount box. Does anyone have an idea why I'm getting all data instead of 5 records?
Which datatables version are you using? For datatables with version 1.10 and above, please use the "pageLength" instead of "iDisplayLength"
$('#example').dataTable( {
"pageLength": 5
} );
In My case i fix it
datatable_object.settings()[0]._iDisplayLength = -1;
datatable_object.draw();
Related
$(document).ready( function () {
var oTable = $('#example').dataTable( {
"sScrollY": "300px",
"sScrollX": "100%",
"sScrollXInner": "150%",
"bScrollCollapse": true,
"bPaginate": false
} );
new $.fn.dataTable.FixedColumns( oTable );
} );
this is not working
You question is not clear but if you want to stop sorting on first column in datatables use aoColumns keyword.
something like this
$('#example').dataTable( {
"aoColumns": [
{ "bSortable": false },
null,
null,
null
]
} );
Using Server side processing, with Ignited Datatables, getting the same result set no mater the action I take no other errors are returned.
The page example: I haven't given the server a name can't include link..
> http://104.200.17.5/BotController
JS code
$(document).ready(function() {
var oTable = $('#big_table').dataTable( {
"bProcessing": true,
"bServerSide": true,
"sAjaxSource": 'BotController/IpTest',
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"iDisplayStart ":20,
"oLanguage": {
"sProcessing": "assets/images/ajax-loader_dark.gif'>"
},
"fnInitComplete": function() {
//oTable.fnAdjustColumnSizing();
},
'fnServerData': function(sSource, aoData, fnCallback)
{
// console.log(fnCallback);
$.ajax
({
'dataType': 'json',
'type' : 'POST',
'url' : sSource,
'data' : aoData,
'success' : fnCallback
});
}
} );
});
The server call:
public function IpTest()
{
//ob_clean();
$this->datatables->select('ID,Voting_ID,User_IP,X_IP')
->unset_column('ID')
->from('User_IP_check');
echo $this->datatables->generate();
}
The solution is to use this, and bind all your column names into mData.
"aoColumns": [{
"mData": "col_name_1"
}, {
"mData": "col_name_2"
}, {
"mData": "col_name_3"
}, {
"mData": "col_name_3"
}
],
I have a general grid that list a serie of processes each one with a sub-grid with the participants of each process.
Just like this
Here is the code:
$("#grid").kendoGrid({
dataSource: {
type: "json",
data: <?php echo $datos_procesos; ?>,
pageSize: 20
},
sortable: true,
filterable: {
extra: false,
operators: {
string: {
startswith: "Empieza con",
eq: "Igual a",
neq: "No es igual a",
contains: "Contiene",
endswith: "Termina con"
}
}
},
selectable: "multiple",
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
});
function detailInit(e) {
var detailRow = e.detailRow;
detailRow.find(".tabstrip").kendoTabStrip({
animation: {
open: { effects: "fadeIn" }
}
});
detailRow.find("#participantes").kendoGrid({
dataSource: {
type: "json",
data: <?php echo $datos_usuarios; ?>,
serverPaging: false,
pageSize: 7,
filter: { field: "IDPROCESO", operator: "eq", value: e.data.IDPROCESO }
},
scrollable: false,
sortable: true,
pageable: {
refresh: true
},
filterable: {
extra: false,
operators: {
string: {
startswith: "Empieza con",
eq: "Igual a",
neq: "No es igual a",
contains: "Contiene",
endswith: "Termina con"
}
}
},
columns: [
{ field: "NOMBRE", title:"Nombre" },
{ field: "EMAIL", title:"Email" },
{ field: "ACCIONES", title: "", encoded: false },
]
});
$("a[id^='delete']").kendoTooltip({
content: "Desasignar usuario",
position: "top"
});
$("a[id^='delete']").click(function(event){
event.preventDefault();
var u = $(this).attr("href");
$.ajax({
url: u
}).success(function() {
alert("Se ha desasignado al usuario del proceso.");
}).error(function() {
alert("Se ha producido un error al desasignar el usuario del proceso.");
});
});
});
The html code is just a simple lines
<div id="grid"></div>
<script type="text/x-kendo-template" id="template">
<div class="tabstrip">
<ul>
<li class="k-state-active">
Participantes
</li>
</ul>
<div>
<div id="participantes"></div>
</div>
</div>
</script>
All works fine, the grids are displayed correctly, the data come from a php function which extracts from database the processes and the participants of each one.
My problem comes when I try to delete a participant of a process, I want to refresh or read the new updated data but It doesnt work.
If I click in link created a[id^='delete'] it calls a php function through ajax deleting the participant but then I cant reload the grid in the success callback. The "pageable: {refresh: true}" property also doesnt work
I have several problems like "Cannot read property 'dataSource' of undefined" or "Cannot read property 'read' of undefined"
I am new with the kendoUI and I am a bit lost, if anyone could give me a clue it would be appreciated.
Thanks for the help
I would suggest to use command line destory in participantes sub-grid. Kendo Grid handles removing item from sub-grid and you don't need to load data again.
detailRow.find("#participantes").kendoGrid({
dataSource: {
transport: {
read: {
url: //here url where sub grid data is read,
dataType: "jsonp"
},
destroy: {
url: // here server side url which removes particpant,
dataType: "jsonp"
},
parameterMap: function(options, operation) {
if (operation !== "read" && options.models) {
return {models: kendo.stringify(options.models)};
}
}
},
serverPaging: false,
pageSize: 7,
filter: { field: "IDPROCESO", operator: "eq", value: e.data.IDPROCESO }
},
scrollable: false,
sortable: true,
pageable: {
refresh: true
},
filterable: {
extra: false,
operators: {
string: {
startswith: "Empieza con",
eq: "Igual a",
neq: "No es igual a",
contains: "Contiene",
endswith: "Termina con"
}
}
},
columns: [
{ field: "NOMBRE", title:"Nombre" },
{ field: "EMAIL", title:"Email" },
{ field: "ACCIONES", title: "", encoded: false },
{ command: ["destroy"], title: " " }],
]
});
$(document).ready(function() {
$("#myDataList").jqGrid({
url: "<?= base_url(); ?>getmydata/getCategory",
datatype: "json",
autowidth: true,
mtype: "GET",
colNames: ["Category", "Description", ""],
colModel: [
{name: "c_category", editable: true, width: 1},
{name: "c_description", editable: true, width: 4, edittype: 'textarea'},
{name: "categoryid", key: true, editable: true, hidden: true, editrules: {edithidden: false}}
],
pager: "#myDataListPager",
rowNum: 10,
rowList: [10, 20, 30],
sortname: "c_category",
sortorder: "asc",
height: 'auto',
viewrecords: true,
gridview: true,
caption: "",
editurl: "<?= base_url(); ?>getmydata/c_action"
});
jQuery("#myDataList").jqGrid('navGrid', '#myDataListPager', {add: true, edit: true, del: true, search: true},
{closeAfterEdit: true}, {closeAfterAdd: true}, {
beforeShowForm: function($form) {
$("td.delmsg", $form[0]).html("Do you want to delete the row with <b>id=" +
$("#myDataList").jqGrid('getGridParam', 'selrow') + "</b>?");
},
afterSubmit: function(response) {
response = $.parseJSON(response.responseText);
alert(response.error);
if (response.error == 0) {
$.openDialog("info", "Successfully deleted ");
} else {
showDialog($('#Dialog'), response.msg, "An error occured");
}
}}
);
});
Above is my grid code, When I click delete the id is the rowid instead of the categoryid, how can I set the id to categoryid instead of row id. I would like to show a dialog message if the response.error is true. When I alert the response.error, I can get the correct result, but I don't know how to call the dialog to display.
http://mymoney.webege.com/getmydata/getCategory?_search=false&nd=1408865724728&rows=10&page=1&sidx=c_category&sord=asc <-- this is the URL I get the json data.
Above is my return json, and I check when click the delete the id is the row id in sequence.
You use key: true for the column "categoryid". So the values of rowid and categoryid have to be identical. You should post an example of testdata which can be used to reproduce the problem or you can debug the code yourself to understand why rowid and categoryid are different in your case.
You second problem with afterSubmit is easy to solve. You should don't show any dialogs inside of afterSubmit. Instead of that you should just return the required information in the correct format. afterSubmit of form editing have to return array of up to 3 items. In case of Delete operation if could be up to 2 items. If no error take place then you should return [true]. In case of error you should return [false, "error description"]. If your case it would be something like below
afterSubmit: function (response) {
var data = $.parseJSON(response.responseText);
return (data != null && data.error !== 0) ? [false, data.msg] : [true];
}
What's the correct way to callback from infinity scroll? currently this `
$(function() {
code();
$('#catview').infinitescroll({
dataType: 'html',
navSelector: 'div.nextPage',
nextSelector: 'div.nextPage a:first',
itemSelector: '#catalogue',
loading: {
finishedMsg: '',
msgText: '',
img: '/../../../images/loading.gif',
},
debug: true,
animate: true
}, $(function() {
code();
}));
});`
Doens't work :( if i set an alert before code() i will see it when page loads and that's it... the other part of the code is :
function code() {
alert('1')
$('.teest').caroufredsel({
direction: 'left',
circular: true,
items: {
visible: 1,
minimum: 2,
},
scroll: {
fx: 'fade',
easing: 'easeOutCubic',
duration: 200,
},
auto: {
duration: 1600
},
width: 208,
height: 265,
prev: {
button: '.prev'
},
next: {
button: '.next'
}
});
}
all i see if run those 2 codes is the alert 1 , the caroufredsel working on the first page, if i scroll down to seconds page nothing happens, it just loads
Please try this :-
$(function() {
$('#catview').infinitescroll({
dataType: 'html',
navSelector: 'div.nextPage',
nextSelector: 'div.nextPage a:first',
itemSelector: '#catalogue',
loading: {
finishedMsg: '',
msgText: '',
img: '/../../../images/loading.gif',
},
debug: true,
animate: true
},
function(arrayOfNewElems)
{
code();
});
});
As per Infinite Scroll Jquery documentation call back function change your code
$(function() {
code();
}));
to
function(arrayOfNewElems){
//here your collaback function
});
Turns out $(function... is readed as object from the javascript engine , and infinity-scroll cannot callback objects. Removing all the $ from the function solve everything