I am trying to populate my data table with data I have populated with codeigniter..
Here is the object am getting
[{"checkbox":"<input type='checkbox' name='chk[]' id='expense_'185' value='185'\/>","expense_id":"185","category":"Others","description":"Payment Of Service For Sep $ October 2018","amount":"ksh.2,000","name":"Caroline Zachaeus","date":"27 Nov 2018"}, {"checkbox":"<input type='checkbox' name='chk[]' id='expense_'185' value='185'\/>","expense_id":"185","category":"Others","description":"Payment Of Service For Sep $ October 2018","amount":"ksh.2,000","name":"Caroline Zachaeus","date":"27 Nov 2018"}]
When am rendering, it says
TypeError: data is undefined
Here is my ajax code
var table = $("#datatable").DataTable({
"columnDefs" : [{"targets" : [ 7,0] , "orderable" : false},
{"targets" : [1], "visible": false},
],
"fixedHeader": true,
"aLengthMenu": [[25, 50, 100, 200, -1], [25, 50, 100, 200, "All"]],
"iDisplayLength": 25,
"order": [],
'processing': true,
'serverSide': true,
'serverMethod': 'get',
'ajax': {
'url':'<?=base_url()?>index.php/expenses/data'
},
"columns" : [
"checkbox",
"expense_id",
"category",
"description",
"amount",
"name",
"date",
"action",
],
})
Here is my page screenshot
where is your controller function
i think you are posting data from controller json type
and you have to set ajax datatype:'json'
then it will work for you
Related
I am using keentheme's Metronic admin template. It has KTDatatables. I can see page length options now as:
5, 10, 30, 50, 100
I want to change it to, to show all records:
5, 10, 30, 50, 100, All
My datatable code:
var datatable = $("#attendance_datatable").KTDatatable({
data: {
type: "remote",
source: baseUrl + "/Hrms/AttendanceManagement/getEmployeesAttendance/",
pageSize: 10,
},
layout: {
scroll: true,
footer: false,
},
sortable: true,
pagination: true,
lengthMenu: [
[10, 25, 50, -1],
[10, 25, 50, "All"],
],
search: {
input: $("#attendance_datatable_search_query"),
key: "generalSearch",
},
columns: [
{
field: "emp_name",
title: "Employee Name",
width: 120,
},
{
field: "attendance_date",
title: "Date",
width: 85,
},
],
});
};
I have tried following:
https://datatables.net/examples/advanced_init/length_menu.html
Change lengthMenu option
lengthMenu: [
[5, 10, 30, 50, 100, -1],
[5, 10, 30, 50, 100, "All"],
],
This should work
I edited as below and it worked code.
You changes "lengthMenu" -> toolbar needs to be added, changes it as follows to chage the pagination.
toolbar: {
// toolbar placement can be at top or bottom or both top and bottom repeated
placement: ['bottom'],
// toolbar items
items: {
// pagination
pagination: {
// page size select
pageSizeSelect: [5, 10, 20, 30, 50, 999], // display dropdown to select pagination size. -1 is used for "ALl" option
},
}
}
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 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
My table contains 25+ columns and rows are not limited.
All records come my client's daily usage.
Server side datatable is slowing down with only 100 rows.
Is there anything which can increase the speed of server side datatable or anything which can work better than datatable?
I am using CodeIgniter (php).
This is my current code:
var ETable = $('#example1').dataTable({
"infoEmpty": "No records available",
"sProcessing": "DataTables is currently busy",
"processing": true,
"bSort": false,
"bFilter": false,
"bAutoWidth": true,
"bLengthChange": true,
"serverSide": true,
"sAjaxSource": "URL",
"aLengthMenu": [[10, 25, 50,100], [10, 25, 50,100]],
"sSortAsc": [[1, 'desc']],
"iDisplayLength": 10,
"dom": 'Zlfrtip',
"bDeferRender": true,
"oLanguage": {
"sInfoFiltered": "",
"sProcessing": "img/loading.gif'>"
},
"tableTools": {
"sSwfPath": "assets/swf/copy_csv_xls_pdf.swf"
}
})
My jqGrid is coming empty with JSON call. Though it is working with datatype='jsonstring' but not with json type. here is my JSON
{
"d": {
"total": 6,
"page": 1,
"records": 6,
"rows": [
{
"id": 1,
"Name": "James",
"EMPID": "0000000056",
"EMPDATE": "",
"JOBTYPE": "REQ",
"DEPTID": "FIN",
"STATUS": "P1"
},
{
"id": 2,
"Name": "James",
"EMPID": "R2",
"EMPDATE": "",
"JOBTYPE": "REQ",
"DEPTID": "FIN",
"STATUS": "P1"
},
{
"id": 3,
"Name": "James",
"EMPID": "V2",
"EMPDATE": "",
"JOBTYPE": "VOU",
"DEPTID": "FIN",
"STATUS": ""
},
{
"id": 4,
"Name": "James",
"EMPID": "V1",
"EMPDATE": "",
"JOBTYPE": "VOU",
"DEPTID": "FIN",
"STATUS": ""
},
{
"id": 5,
"Name": "James",
"EMPID": "009017",
"EMPDATE": "",
"JOBTYPE": "PY",
"DEPTID": "",
"STATUS": "V2"
},
{
"id": 6,
"Name": "James",
"EMPID": "009018",
"EMPDATE": "",
"JOBTYPE": "PY",
"DEPTID": "",
"STATUS": "V1"
}
]
}
}
and my jqGrid call from javascript is
function getgrid()
{
$("#list").jqGrid({
url:'http://10.240.26.41/GetGridFields',
datatype: 'json',
mtype: 'GET',
ajaxGridOptions: { contentType: 'application/json; charset=utf-8' },
//serializeGridData: function (postData) {
// return JSON.stringify(postData);
// },
jsonReader: { repeatitems: false, root: "d.rows", page: "d.page", total: "d.total", records: "d.records" },
colModel: [
{ name: 'id', key: true, width: 60, align: "center", hidden: false },
{ name: 'Name', width: 80, sortable: false, hidden: false },
{ name: 'EMPID', width: 180, sortable: false, hidden: false },
{ name: 'EMPDATE', width: 180, sortable: false, hidden: false },
{ name: 'JOBTYPE', width: 180, sortable: false, hidden: false },
{ name: 'DEPTID', width: 180, sortable: false, hidden: false },
{ name: 'STATUS', width: 180, sortable: false, hidden: false }
],
rowNum: 10,
rowList: [10, 20, 300],
pager: "#pager",
viewrecords: true,
gridview: true,
rownumbers: true,
height: 230,
caption: 'Emp Detail'
})
}
Please let me know where i am wrong here. It is working fine with jsonstring.
How you can see on the demo your jqGrid can read your JSON data. I made in the demo only minimal optimization changes which don't important for your main problem.
So I suppose, that you have either the problem with the usage of full URL (you should use '/GetGridFields' instead of 'http://10.240.26.41/GetGridFields') because you can't get Ajax call to another IP host because of the same origin policy. One other possible reason is that you have wrong 'Content-Type' or some other HTTP header. You can examine the HTTP headers with respect of Fiddler, Firebug or just with Developer Tools of IE or Chrome (see "Network" tab).
In any way I would recommend you to include loadError handler to jqGrid. See the answer for details.
I suggest you validate your json result using jslint since using jsonstring is working could be a format type problem