I have this in my datatable, and in my query, i order it by latest creation date, and in datatable i also sort with the date column which is the 16th column in my datatable, but it does not sort according my need.
may i know how to sort the date so that it populate correct information for me?
$(document).ready(function() {
var asInitVals = new Array();
var oTable = $('.datatable').DataTable({
"bProcessing": true,
"oLanguage": {
"sProcessing": "Loading data..."
},
"bSortCellsTop": true,
"iDisplayLength": 10,
"bLengthChange" : false,
"aLengthMenu": {{ Config::get('crud.aLengthMenu') }},
"bServerSide": true,
"bFilter": false,
"aaSorting": [[16, 'desc']],
"sAjaxSource": "{{ url('someurl.ajax') }}",
"columnDefs": [{
"targets": [ 0 ],
"visible": false,
"searchable": false
}]
});
Related
How can i set fixed right column(action) in laravel datatables like this simple example - not work in laravel). Thanks
tableWatches = $('.datatable-watches').DataTable({
orderCellsTop: true,
fixedHeader: false,
dom: "Bfrtip",
"pageLength": 50,
"processing": true,
"serverSide": true,
scrollY: true,
scrollX: true,
scrollCollapse: true,
paging:false,
fixedColumns: {
leftColumns: 1,
rightColumns: 1
},
"ajax": {
url: "/admin/watches/all-watches",
data: {
condition: condition,
}
},
"searchCols": [
.................
],
columns: [
..................
],
});
Method, which created table content
And this part (
fixedColumns: {
leftColumns: 1,
rightColumns: 1
},
not worked, without errors and warnings, columns still arent fixed.
Need more explanation!
Totally there is no difference between plain js datatable and yajra/laravel-datatables-oracle.
If you wanna use it locally, just need a 100% with table:
<table id="users" class="table responsive" width="100%"></table>
And a js script to feed datatable by jso data:
$('#users').DataTable({
responsive: true,
"data": [
{
"first_name": "the first name1",
"last_name": "the last name1"
},
{
"first_name": "the first name2",
"last_name": "the last name2"
},
]
"columns": [
{
data: "first_name", title: 'first_name',
width: '10%', // You can define each column width in the table
sortable: true,
searchable: false
},
{
data: "last_name", title: 'last_name',
width: '10%',
sortable: true,
searchable: false
}
]
});
Also for server side feeding datatables, Just use ajax:
$('#users').DataTable({
responsive: true,
"columns": [
{
data: "first_name", title: 'first_name',
width: '10%', // You can define each column width in the table
sortable: true,
searchable: false
},
{
data: "last_name", title: 'last_name',
width: '10%',
sortable: true,
searchable: false
}
]
ajax: {
url: your_post_url_returning_datatable_object_json,
type: 'POST'
},
});
As i mentioned, you can define each column of table or make horizontally scrollable:
scrollX: '100%',
I am using jqgrid version 4.6.0
I started using getLocalRow in jqGrid after I asked a question in
This Question
Here is a sample code I prepared When some one clicks a button I delete row2 but when I do ('getLocalRow', 2) it gives me row 3 ? Isn't the rowId param in getLocalRow the rowID of the grid which is the key? getRowData works as expected but I don't want to use that because It gives me everything as a string as noted in This Question and answered in This Answer
Here is the jsFiddle sample to test.
deleteRow = function()
{
$("#list").jqGrid('delRowData', 2);
var row2 = $("#list").jqGrid('getLocalRow', 2);
var row3 = $("#list").jqGrid('getLocalRow', 3);
var row2Corrent = $("#list").jqGrid('getRowData', 2); // Empty
var row3correct = $("#list").jqGrid('getRowData', 3);// gives {id:3, DocGroupName: "name3", DocList: "list3", Mandatory: "No"},
}
"use strict";
var mydata = [
{id:1, DocGroupName: "name1", DocList: "list1", Mandatory: "Yes"},
{id:2, DocGroupName: "name2", DocList: "list2", Mandatory: "No"},
{id:3, DocGroupName: "name3", DocList: "list3", Mandatory: "No"},
{id:4, DocGroupName: "name4", DocList: "list4", Mandatory: "Yes"},
];
$("#list").jqGrid({
//url:'php.scripts/customers.get.php',
//datatype: 'xml',
//mtype: 'POST',
datatype: "local",
data: mydata,
height: "auto",
colNames: ['id', 'Document Group Name','Document Name','No of Mandatory'],
colModel :[
{name:'id',key:true, index:'id', width:55},
{name:'DocGroupName', index:'DocGroupName', width:90, editable: true,edittype: 'select',
},
{name:'DocList', index:'DocList', width:90, editable: true },
{name:'Mandatory', index:'Mandatory', width:90, editable: true}
],
pager: '#pager',
rowNum:10,
rowList:[10,20,30],
sortname: 'idcustomers',
sortorder: 'asc',
viewrecords: true,
gridview: true,
caption: 'Customers',
cellEdit: true,
cellsubmit: 'clientArray',
afterSaveCell: function(rowid,name,val,iRow,iCol) {
if(name=='DocGroupName')
{
var row = $('#list').jqGrid('getRowData',currentRow);
row.DocList='';
var row = $('#list').jqGrid('setRowData',currentRow,row);
}
},
beforeSaveCell: function(rowid,name,val,iRow,iCol) {
// var row = $("#list").getRowData(rowid);
var row = $('#list').jqGrid('getRowData',rowid);
currentRow= rowid;
},
});
The only solution I found to the problem is to use
getRowData(rowId);
Since getrowdata gives everything as a string I was required to do some data conversions for example
var intValue= parseInt(intField);
When I wanted the id from string or
var trueFalse= parseBool(boolField);
function parseBool(val) {
return val === true || val === "true"
}
When I wanted boolean from string.
It is a bit of extra work but that is the only option I am left of.
Used enableCellSelection: true but it doesn't work it out.
$scope.gridOptionss = { data: 'dashboard',enableGridMenu: true,enableCellSelection: true, enableRowSelection: false, enableRowHeaderSelection: false,
columnDefs: [
{field:'Name', displayName:'No Response',width:150},
{field:'age', displayName:'Part Response', width:150},
]
}
I just want to ask how can I add DATA ID on the buttons EDIT/DELETE here is my javascript for rendering datatable rows
I wanted to put Data ID on ROW_ID like for example delete?id=1 (CI: delete/1)
$('#data').dataTable({
"sScrollY": "400px",
"bProcessing": true,
"bServerSide": true,
"sServerMethod": "GET",
"sAjaxSource": "<?php echo base_url(); ?>pages/datatable",
"iDisplayLength": 10,
"aLengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
"aaSorting": [[0, 'asc']],
"aoColumns": [ null, null, null,
{
"mData": null,
"sClass": "center",
"sDefaultContent": 'Edit / Delete',
}
]
}).fnSetFilteringDelay(700);
Assuming you're returning the ID value in your ajax, you can use mRender
...
"sClass": "center",
"mRender": function ( data, type, full ) {
return 'Edit / Delete';
}
full[0] is the data row with the ID parameter. If this is in a different column, obviously you'll to change the index accordingly
I want to filter 3rd column field as per write in text field. But its not work. And i also want to column filter textfield after table head.
JS
<script type="text/javascript" src="assets/admin/js/jquery.validate.js"></script>
<script type="text/javascript" src="assets/admin/js/jquery.dataTables.js"></script>
<script type="text/javascript" src="assets/admin/js/jquery.datatables.columnfilter.js"></script>
JS
<script>
$(document).ready(function() {
$('#example').dataTable( {
"bProcessing": true,
"bFilter" : true,
//"bServerSide": true,
"aaSorting": [[0,'desc']],
"aoColumns":[{ "bVisible":false, "bSearchable": false, "bSortable": false},
{ "bVisible":true,"bSearchable": true, "bSortable": true , "mRender": rendercheckbox},
{ "bVisible":true,"bSearchable": true, "bSortable": true , "mRender": renderucwords},
{ "bVisible":true,"bSearchable": true, "bSortable": false , "mRender": renderattachment, "sClass": "center"},
{ "bVisible":true, "bSearchable": false, "bSortable": false ,"mRender": renderaction , "sClass": "center"}],
"bJQueryUI": true,
"sPaginationType": "full_numbers",
"sScrollX": "100%",
"sScrollXInner": "100%",
"bScrollCollapse": true,
"sAjaxSource":"<?php echo site_url('admins/promotion/getdata');?>"
} ).
columnFilter({
sPlaceHolder: "head:before",
bFilter: false,
aoColumns: [ null,
null,
{ type: "text",
},
null,
null
]
});
});
</script>
Use
$('#example').DataTable( {});
Instead of
$('#example').dataTable( {});
Also check for any javascript error in console