I am using DataTables 1.10.11 version.
I have a requirement. I have almost 1000 data list. From that list I need to order on two columns by default and then need to show only first 10 rows.
Please help me to achieve this requirement.
You can try like this:
$(document).ready(function() {
$('#example').dataTable( {
"bPaginate": true,
"sPaginationType": 'full_numbers',
"iDisplayLength": 10,
columnDefs: [ {
targets: [ 0 ],
orderData: [ 0, 1 ]
}]
} );
} );
Finally I am able to implement this requirement.
$('#id').DataTable({
dom : 't',
"processing" : true,
"deferRender" : true,
"data" : data,
"columns" : getColConfg(),
"language" : {
"emptyTable" : "No data available"
},
"pageLength" : 10
"order" : [ [ 2, "desc" ], [1, "desc"] ]
});
dom : 't',
Adding dom as 't' only served my requirement.
Related
I am using data tables in laravel here I am trying to fetch data with relationships some times relationship id is not present so it gives null value in laravel blade I can handle it by checking if it is null. but in the data table, I can't use it.
returning values to data table
return [
'delivery_run_id' => $run_sheet->delivery_runs->name:
];
when i put before return statement then it work fine but i think that approach is not good
if(empty($run_sheet->delivery_runs->name))
{
$delivery_run = '';
}
else
{
$delivery_run = $run_sheet->delivery_runs->name;
}
I try to set default value for data table column but its not working
var table = $(tablename).DataTable({
responsive: true,
"order": [],
'aoColumnDefs': [{
'bSortable': false,
'aTargets': ['nosort']
}],
buttons: [
'print',
'copyHtml5',
'excelHtml5',
'csvHtml5',
'pdfHtml5',
],
processing: true,
serverSide: true,
ajax: {
url: url,
type: 'get',
data: filters
},
columns: columns,
"language": {
processing: "<img src='https://thumbs.gfycat.com/WatchfulSnarlingBettong-max-1mb.gif'>"
},
"columnDefs": [
{
"data": null,
"defaultContent": "<button>Edit</button>",
"targets": -1
}
]
});
use a ternary operator to check is set or not.
$delivery_run = $run_sheet->delivery_runs->name ?? "";
return [
'delivery_run_id' => $run_sheet->delivery_runs->name ?? "";
];
Here is my code. I tried to alert the data in a particular row, but I keep getting undefined error.
I tried to print aData using aData.toString(), I'm getting [object] [object] as response. how do I debug the contents of aData?
My Code:
$(document).ready(function() {
var table = $('#datatable').DataTable({
processing: true,
serverSide: false,
order: [[1, 'asc']],
"aoColumnDefs": [ { "sClass": "hide_me", "aTargets": [ 0 ], visible: false } ], // first column in visible columns array gets class "hide_me"
ajax: {
url: "/getData",
dataSrc: "list"
},
columns: [
{ data : "_id"},
{ data : "user.name" },
{ data : "student.name" },
{ data : "class" },
{ data : "status" },
],
"fnRowCallback": function( nRow, aData, iDisplayIndex, iDisplayIndexFull ) {
alert(aData.[4]);
if ( aData[4] == true )
{
$('td:eq(4)', nRow).html( '<b>On</b>' );
}
else {
$('td:eq(4)', nRow).html( '<b>Off</b>' );
}
},
responsive: true
});
});
I am having a grid populated with search results. The sorting seems to be working fine if all the values in each column are numbers or if all of them are in the same case(upper or lower). But some of the columns in my grid like firstname and lastname are a mix of uppercase, lowercase and empty values. When I click on that particular header for sorting purpose, these values seems to be sorted as case sensitive. The uppercase values come one by one, then there are a mix of empty values and then the lowercase values. I want this sorting to be done as case insensitive alphabetically. I think extjs sorts these values based on the ascii values. Is there any way I can overwrite this functionality and where should I be doing that.
For example, I have some values like james, JAMESON and ROBERT. When I click on top of the header, if it ascending, I should be getting james, JAMESON and Robert and all the empty/null values together at the top or bottom. But that is not happening. I am getting some empty values on the top and then JAMESON, james, empty value again , ROBERT followed by empty/null values. How can I make sure all the null values are grouped together and the sorting should be case insensitive.
{
header: "User Last Name",
width: 170,
dataIndex: 'userLastName'
},
{
header: "User First Name",
width: 170,
dataIndex: 'userFirstName'
},
Thanks,
On the field in your model, define a sortType,
http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.data.Field-cfg-sortType
either as a function or as one of the predefined strings:
http://docs.sencha.com/extjs/4.2.2/#!/api/Ext.data.SortTypes
I would guess that asUCText would be a good start, but I don't know what happens to null values there...
var itemsPerPage = 10; // set the number of items you want per page
var data = {
"success" : true,
"users" : [{
"id" : 1,
"name" : 'ed',
"email" : "ed#sencha.com"
}, {
"id" : 2,
"name" : 'Tommy',
"email" : "tommy#sencha.com"
},
{
"id" : 3,
"name" : 'Tommy',
"email" : "tommy#sencha.com"
},
{
"id" : 4,
"name" : 'Tommy',
"email" : "tommy#sencha.com"
},
{
"id" : 5,
"name" : 'Tommy',
"email" : "tommy#sencha.com"
},
{
"id" : 44,
"name" : '1',
"email" : "tommy#sencha.com"
},
{
"id" : 45,
"name" : '2',
"email" : "tommy#sencha.com"
},
{
"id" : 11,
"name" : 'Ed',
"email" : "ed#sencha.com"
}, {
"id" : 12,
"name" : 'apple',
"email" : "tommy#sencha.com"
},
{
"id" : 13,
"name" : 'Apple',
"email" : "tommy#sencha.com"
},
{
"id" : 14,
"name" : 'Tommy',
"email" : "tommy#sencha.com"
},
{
"id" : 15,
"name" : 'tommy',
"email" : "tommy#sencha.com"
},
{
"id" : 21,
"name" : 'Ed',
"email" : "ed#sencha.com"
}, {
"id" : 22,
"name" : 'Tommy',
"email" : "tommy#sencha.com"
},
{
"id" : 23,
"name" : 'Tommy',
"email" : "tommy#sencha.com"
},
{
"id" : 24,
"name" : 'Tommy',
"email" : "tommy#sencha.com"
},
{
"id" : 25,
"name" : 'Tommy',
"email" : "tommy#sencha.com"
},
]
}
Ext.apply(Ext.data.SortTypes, {
asPerson : function (name) {
// expects an object with a first and last name property
console.log("Test");
return name.toUpperCase() + name.toLowerCase();
}
});
var store = Ext.create('Ext.data.Store', {
autoLoad : true,
fields : [{
name : 'name',
sortType : 'asPerson'
}, {
name : 'email'
// sortType set to asFloat
}
],
pageSize : itemsPerPage, // items per page
data : data,
proxy : {
type : 'memory',
enablePaging : true,
reader : {
type : 'json',
root : 'users',
successProperty : 'success'
}
},
sorters : [{
property : 'name',
direction : 'ASC'
}
],
});
//Ext.Ajax.request({
// loadMask: true,
// url: 'app/data/users.json',
//
// success: function(resp) {
// // resp is the XmlHttpRequest object
// var options = resp.responseText;
//
//
//
// store.loadData(options);
// }
//});
//
//
Ext.define('AM.view.user.list', {
extend : 'Ext.grid.Panel',
alias : 'widget.userlist',
title : 'All Users',
initComponent : function () {
Ext.create('Ext.grid.Panel', {
title : 'My Test Demo',
store : store,
columns : [{
header : 'ID',
dataIndex : 'id'
}, {
header : 'Name',
dataIndex : 'name'
}, {
header : 'Email',
dataIndex : 'email',
flex : 1
}
],
width : 350,
height : 280,
dockedItems : [{
xtype : 'pagingtoolbar',
store : store, // same store GridPanel is using
dock : 'bottom',
displayInfo : true,
pageSize : 5,
}
],
renderTo : Ext.getBody()
});
this.callParent(arguments);
}
});
In ExtJS5 I add a transform to the sorter, e.g.
sorters: {
transform: function(item) {
return item.toLowerCase();
},
property: 'category_name'
}
i'm newbie in laravel and want to use datatables.net. i want to using chumper datatables.net in my projects? after installing that. how to use or update this code for server side (sAjaxSource)?
oTable_categories =$('#showCategories').dataTable({
"bLengthChange": false,
"iDisplayLength": 6,
"bScrollCollapse": true,
"bJQueryUI": true,
"bAutoWidth": false,
"sAjaxSource": "server_processing.php",
"sPaginationType": "full_numbers",
"bProcessing": true,
"fnDrawCallback": function() {
clickRowHandler_categories();
},
"fnServerParams": function ( aoData ) {
aoData.push(
{"name": "id" , "value": "id" },
{"name": "title" , "value": "title" },
{"name": "join" , "value": "" },
{"name": "action" , "value": "categories" }
)}
});
function clickRowHandler_categories() {
$('#showCategories tbody tr').bind('click', function () {
var aData = oTable_categories.fnGetData( this );
if ( aData == null ) return false;
iId_categories = aData[0];
});
}
i must be define new route such as :
Route::controller(
'mediaManagment','mediaManagmentController',
array(
'getIndex' => 'mediaManagment.index',
'postUpdate' => 'mediaManagment.update',
)
);
i do not know how to use that.
thanks
Here, "sAjaxSource": "server_processing.php" should contain the url of your controller which is sending more/paginated data/records/models so use the mediaManagment because this URL will invoke the getIndex() method. So, use something like this:
"sAjaxSource": "mediaManagment" // http://example.com/mediaManagment
Do the processing in your getIndex() method.
var pid = $('#byId').val();
jQuery("#patient").jqGrid({
mtype: 'GET',
url : "totalPatientList.html",
postData :{pid:pid},
datatype : "json",
colNames : [ 'Patient Id', 'Name', 'BirthDate', 'Address','City','Mobile' ],
colModel : [ {
name : 'patientId',
index : 'patientId',
width : 55
}, {
name : 'name',
index : 'name',
width : 200
}, {
name : 'birthdate',
index : 'birthdate',
width : 100,
editable : true
}, {
name : 'address',
index : 'address',
editable : true,
width : 80
}, {
name : 'city',
index : 'city',
editable : true,
width : 80
}, {
name : 'mobile',
index : 'mobile',
editable : true,
width : 80
} ],
rowNum : 10,
rowList : [ 5, 10, 30 ],
pager : '#pager',
sortname : 'id',
viewrecords : true,
sortorder : "desc",
caption : "Search Patient's List",
width : 800,
cellEdit : true,
});
I have a code like above.
I want to send pid from this JSP page to controller.I am getting pid , but when I reload my web page. I want it without reloading the page when i click the button.
How can I do that?
plz plz help me....
You should use the "function" style of postData:
url: "totalPatientList.html",
postData: {
pid: function () {
return $('#byId').val();
}
}
In the case the value for the pid parameter will be new evaluated on every request to the server. See the answer for more details. In the way you can send multiple parameters to the server by including multiple methods in postData object.