My datatable columns header is not aligned with their content:
Here is how it looks like:
Here is a datatable code:
$("#myTable").dataTable(
{
"sDom": 't<"fg-toolbar ui-toolbar ui-widget-header ui-corner-bl ui-corner-br ui-helper-clearfix"i>',
//sDom:
//'l' - Length changing
//'f' - Filtering input
//'t' - The table!
//'i' - Information
//'p' - Pagination
//'r' - pRocessing
"bAutoWidth": false,
"aoColumns": [
{ "sSortDataType": "dom-checkbox" }, //checkbox
{ "sType": "string", "bSortable": true }, //CreatedDate
{ "sType": "string", "bSortable": true }, //CreatedBy
{ "sType": "string", "bSortable": true }, //Category
{ "sType": "string", "bSortable": false }, //Note
{ "sType": "string", "bSortable": true}, //Application
{ "sType": "string", "bSortable": false } //Update Button
],
"sScrollY": "180px",
"bPaginate": false,
"bFilter": false,
"aaSorting": [],
"bAutoWidth": false,
"bInfo": true,
"bJQueryUI": true
});
What am I missing?
I have found a solution for my case.
I've been searching online but couldn't find a solution that would help in my case, so I played with a css and found what fixed my problem
My table has an id #myTable.
So, I just needed to set the particular columns' left padding:
#myTable td:nth-child(6){
padding-left:50px;
}
#myTable td:nth-child(7){
padding-left:50px;
}
And it fixed the problem:
Related
I am adding rows to a Datatable with the following code :
for (var key in itm) {
t.row.add([
null,
itm[key].itemcode,
itm[key].itemdesc,
itm[key].batch,
itm[key].expiry,
itm[key].qty,
itm[key].unit,
itm[key].rate,
itm[key].total,
itm[key].discper,
itm[key].discamt,
itm[key].staxper,
itm[key].staxamt,
itm[key].amount,
itm[key].netprate,
itm[key].salerate,
itm[key].page,
itm[key].sub1,
itm[key].sub2,
'<i class="fa fa-edit"></i>',
'<i class="fa fa-trash"></i>'
]).draw(false);
}
This is working fine except for the large data. When I try to add around 750 rows its too slow even the page hangs-up some times.
I tried to add the data using rows.add() API but its not working, the table is blank. Here is the code i am using to add bulk data.
var t = $('#productTable').DataTable();
t.rows.add(itm);
My datatable definition is as under :
$('#productTable').DataTable({
"paging": false,
"ordering": false,
"searching": false,
"info": false,
"rowHeight": '100px',
"scrollY": "200px",
"scrollX": true,
"scrollCollapse": true,
"paging": false,
"columns": [
{ data: null },
{ data: 'itemcode' },
{ data: 'itemdesc' },
{ data: 'batch' },
{ data: 'expiry' },
{ data: 'qty' },
{ data: 'unit' },
{ data: 'rate' },
{ data: 'total' },
{ data: 'discper' },
{ data: 'discamt' },
{ data: 'staxper' },
{ data: 'staxamt' },
{ data: 'amount' },
{ data: 'netprate' },
{ data: 'salerate' },
{ data: 'page' },
{ data: 'sub1' },
{ data: 'sub2' },
{ data: null },
{ data: null },],
"columnDefs": [
{ className: "dt-right", "targets": [7,8,9,10,11,12,13] },
{ "targets": varbatchcol, visible: false },
{ "targets": vardisccol, visible: false },
{ "targets": vartaxcol, visible: false },
{ "targets": vartotcol, visible: false },
{ "targets": [17,18], visible: false },
],
"fnRowCallback" : function(nRow, aData, iDisplayIndex){
$("td:first", nRow).html(iDisplayIndex +1);
return nRow;
}
});
and the data coming from server is :
Found the problem.
t.rows.add(itm);
should be
t.rows.add(itm).draw();
And this also solved the slow populating issue.
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 want to make a Prescription management system with laravel. so need to patient list. i loaded patient information in Datatable. this is loaded successfully but when i use Datatable Search Filter Column then this error message come "mb_strtolower() expects parameter 1 to be string, array given"
var table = $('#patient-data-table').DataTable( {
"processing": true,
"serverSide": true,
"paging": true,
"lengthChange": true,
"searching": true,
"ordering": true,
"info": true,
"autoWidth": false,
"aoColumnDefs": [{ "bVisible": false, "aTargets": [1] }],
"ajax": {
"url": "{{URL::to('/')}}/patientList",
"type": "GET",
"dataType": "json",
},
"columns": [
{
"render": function (data, type, JsonResultRow, meta) {
return '<img src="{{asset('patient_image')}}/'+JsonResultRow.image+'" style="height:30px; width:30px; border-radius: 30px;"/>';
}
},
{ "data": "fullName" },
{
data: {fullName : "fullName", email : "email", address : "address"},
mRender : function(data, type, full) {
return "Name: "+data.fullName+' <br> '+"Email: "+data.email+' <br> '+"Address: "+data.address;
}
},
{ "data": "contact_number" },
{ "data": "gender" },
{ "data": "Link", name: 'link', orderable: false, searchable: false}
],
"order": [[1, 'asc']]
} );
How can i solve this problem?
Try change:
{
data: {fullName : "fullName", email : "email", address : "address"},
mRender : function(data, type, full) {
return "Name: "+data.fullName+' <br> '+"Email: "+data.email+' <br> '+"Address: "+data.address;
}
},
For:
{
data: {fullName : "fullName", email : "email", address : "address"},
mRender : function(data, type, full) {
return "Name: "+data.fullName+' <br> '+"Email: "+data.email+' <br> '+"Address: "+data.address;
}
searchable: false, //add this line
},
If i search "Hossain" datatable is not getting sorted. Though this data is available in datatable. How can i solve this problem?
var table = $('#list_table').DataTable( {
"processing": true,
"serverSide": true,
"destroy": true,
"searching": true,
"ordering": true,
"bInfo": true,
"paging": true,
"ajax": {
"url": "{{URL::to('/')}}/current_employeelist",
"type": "POST",
"headers":{'X-CSRF-TOKEN': '{{ csrf_token() }}'},
"data": {location: $("#location").val()}
},
"columns": [
{
"render": function (data, type, JsonResultRow, meta) {
return '<img src="{{asset('employee_image')}}/'+JsonResultRow.Images+'" style="height:30px; width:30px; border-radius: 30px;"/>';
}
},
{ "data": "Link",
"mRender": function (data, type, full) {
return '<a target="_blank" href="{{URL::to('/')}}/employeeinfo/'+full.id+'">'+full.employee_name+'</a>';
}
},
{ "data": "location_name" },
{ "data": "depertment_name" },
{ "data": "designation_name" },
{ "data": "contact_number" },
{ "data": "joining_date" },
#permission('EditEmployeeInfo')
{ "data": "Link", name: 'action', orderable: false, searchable: false},
#endpermission
],[enter image description here][1]
"order": [[0, 'asc']]
});
I want to get searching actual data from datatable.
Image is here
my below code not worked on IE 8.
Its a JQGrid (treegrid) to display treegrid format from json server. it worked at firefox.
$(function () {
"use strict";
$("#tree").jqGrid({
url: "http://myJSON-URL/",
datatype: "json",
colNames: ['id', 'Prestations'],
colModel: [
{ name: 'id', width: 100, key: true, hidden: true },
{ name: 'name', width: 785, sortable: false }
],
sortname: 'id',
sortorder: "asc",
hiddengrid: true,
gridview: true,
treeGrid: true,
treeGridModel: "adjacency",
ExpandColumn: 'name',
ExpandColClick: true,
jsonReader: { repeatitems: false, root: function (obj) { return obj; } },
height: "auto"
});
});
I think its AJAX cors problem.
Any idea? thanx.
The json server side responsed these:
json = [
{
"id": "1",
"name": "ECHANGEUR",
"level": "0",
"parent": "null",
"isLeaf": false,
"expanded": false,
"loaded": true
},
{
"id": "1_1",
"name": "Intervention Aller sur Site",
"level": "1",
"parent": "1",
"isLeaf": false,
"expanded": false,
"loaded": true
},
{
"id": "1_1_1",
"name": "Date et heure d'arrivée sur le site",
"level": "2",
"parent": "1_1",
"isLeaf": true,
"expanded": true,
"loaded": true
},
{
"id": "1_1_2",
"name": "Consignation de l'échangeur",
"level": "2",
"parent": "1_1",
"isLeaf": true,
"expanded": true,
"loaded": true
}
];
You have just the problem with the bug specific for jqGrid 4.7.x. You can try tree demos which uses different versions of jqGrid and the same code and JSON which you posted:
demo46, demo47, demo48, demo-free-jqGrid-GitHub.
(The last one uses free jqGrid 4.8 which I published recently, see here and here).
You can verify that the demo which uses jqGrid 4.7 only have the problem in IE8 and both other demos have no problem. You can read more about the bug here or here.