Good morning. I made a data search & filter with datatables and it worked .. but when I moved the page and returned to that page the data was still stuck (not reset). In view I made it like the following image:
and in the js file I made it like this
brandmanage = $('#brandmanage').DataTable({
dom : 'rtpi',
pageLength: {{ $limit ?? '10' }},
language : {
paginate : {
previous : '<i class="fa fa-angle-left"></i>', // or '←'
next : '<i class="fa fa-angle-right"></i>', // or '→'
},
},
processing : true,
drawCallback : function( settings ) {
$('#lengthInput option[value={{ $limit ?? '10' }}]').attr('selected','selected');
},
serverSide : true,
stateSave : true,
ajax : {
url : "{{ route('lms.brand.getdata',['pfx'=>$pfx]) }}",
dataType : "json",
type : "POST",
data : { _token: "{{csrf_token()}}" }
},
columns : [
{ data : "brand" },
{ data : "corporate" },
{ data : "num_of_company" },
{ data : "primary" },
{ data : "secondary" },
{ data : "status" },
{ data : "action",
orderable : false,
className : "text-center",
},
],
});
$('#brandDataLength').on('change', function () {
brandmanage.page.len( $(this).val() ).draw();
});
$('#searchBrand').on('keyup', function () {
brandmanage.search( this.value ).draw();
});
What do I do so that when I have moved pages, the search results can be reset?
If you change stateSave to false, then dataTables will not remember the selected filters etc. Thereby the search results will be reset when you reload the page.
Related
How Can I Add plus 14days into the current visit date of my tables
it tried it this code but it show many numbers lol
------------- HERES MY CODE --------------------
//TABLE SUPERVISORY LIST
table_supervisory_list : function (id,data){
$(id).DataTable({
responsive: true,
data : data,
columnDefs:[
{
"targets":[0],
"data" : data,
"render": function (x){
return `
<button onclick="open_patient_chart(`+`'`+x.vnote_mrno+`'`+`);" type="button" class="btn btn-primary btn-minier btn-round">
<i class="fa fa-sign-in-alt"></i> `+x.vnote_mrno+`
</button>
`;
}
},
{
"targets":[1],
"data" : data,
"render": function (x){
return x.patient_lastname +' '+ x.patient_firstname +' '+ x.patient_middlename;
}
},
{
"targets":[3],
"data" : data,
"render": function (x){
return x.vnote_visitdate + moment(x.vnote_visitdate).add(7,"days");
}
},
],
columns : [
{ data : null, sTitle : 'Options' },
{ data : null, sTitle : 'Name' },
{ data : 'vnote_visitdate', sTitle : 'Last Supv done' },
{ data : null, sTitle : 'Next Supv due'},
{ data : 'vnote_formtype', sTitle : 'Action Required' },
{ data : 'vnote_enteredby', sTitle : 'Discipline' },
],
bDestroy: true
});
},
IT SHOWS 2019-04-091555344000000
That is because you're trying to append a moment object to a string.
You don't need to do that, you can simply do:
moment(x.vnote_visitdate).add(14, "days").toString();
If you want to keep the same format, you need to do something like this:
moment(x.vnote_visitdate).add(14, "days").format("YYYY-MM-DD");
Here is the documentation for the format() function.
I'm new to jtable and trying to figure out how can I get the selected value of a field (Types, dropdown); and based on this value, I need to make a call to a Java class and get the value for field 2 (Price, input type).
$(document).ready(function() {
var selectedValue = null;
$('#StudentTableContainer').jtable({
title : 'Students List',
actions : {
listAction : 'Controller?action=list',
createAction : 'Controller?action=create',
updateAction: function(postData) {
var values = [];
console.log("updating from custom function...");
return $.Deferred(function($dfd) {
$.ajax({
url: './Controller?action=update',
type: 'POST',
`enter code here` dataType: 'json',
data: postData,
success: function(data) {
$.each(data, function(entryindex, entry) {
values.push(entry['typeId']);
});
alert(values);
$dfd.resolve(data);
},
error: function() {
$dfd.reject();
}
});
});
},
deleteAction : 'Controller?action=delete'
},
fields : {
studentId : {
title : 'Student Id',
width : '30%',
key : true,
list : true,
edit : false,
create : true
},
name : {
title : 'Name',
width : '30%',
edit : true
},
emailId : {
title : 'Email',
width : '20%',
edit : true
},
typeId : {
title : 'types',
width : '20%',
edit : true,
listClass:'genderClass',
options: { 'S':'Select','D': 'Dynamic', 'F': 'Fixed', 'C':'Customize' }
},
priceId : {
title : 'Price',
width : '20%',
edit : true
}
}
});
});
Based on the selection of 'TypeId', I need to populate the value of the Price. I tried putting in some logic in the 'updateAction', but no luck.
i have below code for generating jquery datatable in my spring mvc project .
but i loading the page , the javascript throwing some warning.
var sTable = $('#tblKeyDetails').dataTable({
"aoColumns" : [ null,null, null,null],
"sPaginationType" : "full_numbers",
});
$.ajax({
dataType : 'json',
type : 'GET',
url : 'getKeyDetails.html',
data :({
form : $('#ddlKeyStatus').val()
}),
beforeSend : function() {
//startPreloader();
},
complete : function() {
//stopPreloader();
},
success : function(data) {
sTable.fnClearTable();
$.each(data, function(index,item) {
var rowCount = index+1;
sTable.fnAddData( [ '<label align="center">'+rowCount+'</label>',
item['key'],
item['date'],
item['userEmail']
]);
});
}
});
response objects contain
date: null
deviceId: null
id: 3
key: "DQAIYLFFDVFG"
userEmail: null
userId: 0
change this:
sTable.fnAddData( [ '<label align="center">'+rowCount+'</label>',
item['key'],
item['date'],
item['userEmail']
]);
to
sTable.fnAddData( [ '<label align="center">'+rowCount+'</label>',
item['key']!=null ? item['key'] : "",
item['date']!=null ? item['date'] : "",
item['userEmail']!=null ? item['userEmail'] : ""
]);
preventing null values will fix your issue. You can also disable datables warning messages but fix the problem could be better.
i tried to fire the Create event in transport section of the Kendo Datagrid. I tried to read the whole documentation for Kendo Datagrid but i'm not able to fire create, update and destroy events.
Could somebody please tell me what can be wrong in my code?
Thanks for any advice.
Here is the source of method:
/**
* Fill data grid by users
* #param {Number} a
* #param {Number} b
* #return {Number} sum
*/
$scope.initTable = function() {
// get access token from localstorage
var token = localStorage.getItem($rootScope.lsTokenNameSpace);
// set pagination data
var paginationData = {
"token" : token,
"data" : {
"page" : 1,
"items_per_page" : 20
}
};
$("#grid").kendoGrid({
dataSource : {
transport : {
// read list
read : function(options) {
$.ajax({
url: $rootScope.apiBaseUrl + "user/list",
dataType: "json",
type : "POST",
data: JSON.stringify(paginationData),
success: function(response) {
console.log("List of users succesfully obtained");
console.log(response.result);
// pass response to model
options.success(response);
// $notification.enableHtml5Mode();
},
error: function(error) {
console.log("user list request error");
console.log(error);
$notification.error( "User list cannot be loaded", "Please try again in a minute.");
}
});
},
// create list item
create : function(options) {
console.log("Create function");
},
// update list item
update : function(options) {
console.log("Update function");
},
// destroy list item
destroy: function(options) {
console.log("Destroy function");
},
// important for request
parameterMap: function(options, operation) {
console.log(options);
console.log(operation);
if (operation === "read") {
// send parameter "access_token" with value "my_token" with the `read` request
return {
data: paginationData,
token: token
};
} else
return {
data: kendo.stringify(options.models),
access_token: "my_token"
};
}
},
// data model
schema : {
// JSON data parrent name
data : "result",
model : {
fields : {
id : {
type : "integer",
editable: false,
nullable: true
},
username : {
editable: "inline",
type : "string",
validation: {
required: {
message: "Please enter a Username"
}
}
},
name : {
type : "string"
},
surname : {
type : "string"
},
email : {
type : "string"
},
created : {
type : "string"
},
role : {
type : "string"
}
}
}
},
// data source settings
pageSize : 10,
editable: true,
serverPaging : false,
serverFiltering : false,
serverSorting : false,
batch : true
},
// data grid settings and customization
toolbar : ["create"],
editable: true,
height : 350,
filterable : true,
sortable : true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
selectable: "multiple, row",
// columns
columns : [ {
field : "id",
title : "ID"
}, {
field : "username",
title : "Username"
},{
field : "name",
title : "Name"
},{
field : "surname",
title : "Email"
},{
field : "email",
title : "Email"
},{
field : "created",
title : "created at"
},{
field : "role",
title : "Role"
},
{ // table action buttons
command: [
{name: "edit"},
{name: "destroy", text: "Remove"},
{name: "detail", click:redirectToUserDetal},
] ,
// Action column customization
title: "Action",
width: "300px"
}
]
});
};
});
have faced same issue. But I have solved using this.
To fire create/delete/update we need to specify schema in dataSource( in schema we should mention atleast what is id field).
schema: { model: { id: "StudentID" } }
Code:
var dataSource = new kendo.data.DataSource({
transport: {
read: function (options) {
alert("read");
},
create: function (options) {
alert("create");
},
update: function (options) {
alert("update"); },
destroy: function (options) {
alert("destroy"); }
},
schema: {
model: {
id: "StudentID"
}
}
You configured your dataSource for batch mode, batch: true, but you provided no way to save the changes. Remember that batch mode queue's up all of your create, update, and destroy actions. They are all fired at once when the dataSource is synced, (i.e. dataSource.sync()).
The simplest way to enable this, given your config, is add 'save' to your toolbar. You might also want to include 'cancel' as well.
toolbar : ["create", "save", "cancel"],
Make sure your id is set on the objects that your read action is returning.
I had the same issue with my update action not being hit. I checked Fiddler and the POST was being made, but my id field was not set. I traced this back and found that my id was not being set on the objects when they were returned by my read action.
Without the id field being sent in the POST, my controller didn't recognize the parameters, thus not hitting my action.
My problem now is trying to send the ID (editable: false) of a row when editing that row.
For example, i have a grid with columns userid(editable: false), username(editable: true), firstname(editable: true), lastname(editable: true). When editing the row the grid is only sending the parameters username, firstname and lastname. In the server side i need the userid to know to which user i've tu apply those new values.
the editUrl looks like:
editurl : CONTEXT_PATH+'/ajax/admin/savePart.do?category=1',
Thanks
This is the full code:
$.jgrid.useJSON = true;
//http://www.trirand.com/jqgridwiki/doku.php?id=wiki%3Acommon_rules
$(document).ready(function() {
//alert(CONTEXT_PATH);
var lastsel;
jQuery("#rowed3").jqGrid(
{
url : CONTEXT_PATH+'/ajax/getPartesByCategory.do?catid=<s:property value="categoryId" />',
//url : '/autoWEB/text.html',
datatype: "json",
ajaxGridOptions: { contentType: "application/json" },
jsonReader : {
root: "rows",
page: "page",
total: "total",
records: "records",
repeatitems: false
},
headertitles: true,
colNames : [ 'ID', 'Pieza', 'Disponible'],
colModel : [ {
name : 'piezaId',
index : 'piezaId',
align : "right",
width : 50,
editable : false,
required : true
}, {
name : 'descripcion',
index : 'descripcion',
width : 390,
editable : true,
required : true
}, {
name : 'disponible',
index : 'disponible',
width : 80,
editable : true,
edittype : 'select',
editoptions:{value:"0:No;1:Si"},
required : true
} ],
rowNum : 20,
rowList : [ 20, 40, 60, 80 ],
pager : '#prowed3',
sortname : 'piezaId',
postData: {piezaId : lastsel},
mtype:"POST",
viewrecords : true,
sortorder : "desc",
onSelectRow : function(id) {
if (id && id !== lastsel) {
jQuery('#rowed3').jqGrid('restoreRow', lastsel);
jQuery('#rowed3').jqGrid('editRow', id, true);
lastsel = id;
}
},
editurl : CONTEXT_PATH+'/ajax/admin/savePieza.do?categoria=<s:property value="categoryId" />',
caption : "Piezas"
});
jQuery("#rowed3").jqGrid('navGrid', "#prowed3", {
edit : false,
add : false,
del : false
});
})
in your onSelectRow callback, you can modify the editUrl to be whatever you want, including passing in the ID you need.
$("#rowed3").jqGrid('setGridParam', {editurl:'whatever/url/you/need/with/the/id'});
jqGrid will add all the other nececessary params to that editurl for you.
You can use
hidden: true, editable: true, editrules: { edithidden: false }, hidedlg: true
in the definition of the piezaId (ID) column. The parameter hidedlg is currently not real needed, but can be useful if you decide the use other jqGrid features.
Passing values in the GET string worked for me.
editurl: '/ajax/update?line=1',