I am working on a web page where I am using jQuery datatable plugin.
I am using "colvis" button to show/hide table columns.
I am facing a problem when I remove all columns(empty table after deselect all columns) and then select column(s) again. How to solve it? TIA.
*If there is at-least 1 column in the table then its working perfectly.
No error on console as well.
$(function () {
var table = $(".mydataTable").dataTable({
"pagingType": "full_numbers",
"iDisplayLength": 10,
bJQueryUI: true,
"aLengthMenu": [[-1, 10, 20, 50, 100], ["All", 10, 20, 50, 100]],
buttons: [
{
extend: 'colvis',
text: '<i class="fa fa-eye fa-lg"></i>',
collectionLayout: 'fixed one-column',
postfixButtons: ['colvisRestore']
}
],
dom: 'lfBrtip',
});
Related
Datatable js structure not working in livewire when I view livewire view without load but it's working when I view livewire with load it's fine.
So how I refresh the js code when I view a livewire view file without load?
For Example
Livewire view with load window - https://ibb.co/QDPJk4j
Livewire view without load window - https://ibb.co/KDqvdc7
$(document).ready(function () {
$('#tableExample1').DataTable({
"dom": 't'
});
$('#tableExample2').DataTable({
"dom": "<'row'<'col-sm-6'l><'col-sm-6'f>>t<'row'<'col-sm-6'i><'col-
sm-6'p>>",
"lengthMenu": [[6, 25, 50, -1], [6, 25, 50, "All"]],
"iDisplayLength": 6,
});
$('#tableExample3').DataTable({
dom: "<'row'<'col-sm-4'l><'col-sm-4 text-center'B><'col-sm-4'f>>tp",
"lengthMenu": [[10, 25, 50, -1], [10, 25, 50, "All"]],
buttons: [
{extend: 'copy', className: 'btn-sm'},
{extend: 'csv', title: 'ExampleFile', className: 'btn-sm'},
{extend: 'pdf', title: 'ExampleFile', className: 'btn-sm'},
{extend: 'print', className: 'btn-sm'}
]
});
});
I need to reload the js when I view Livewire view file with emit.
Is it posible to decrease the show entries in datatable. I want to only show 5 entries instead of 10.
change the iDisplayLength. This for example:
$(document).ready(function() {
$('#tbl_id').dataTable({
"aLengthMenu": [[25, 50, 75, -1], [25, 50, 75, "All"]],
"iDisplayLength": 5
});
} );
Code to print excel and pdf
I would like to hide a column from a datatable using tabletool.
var tableTools = new $.fn.DataTable.TableTools(table, {
'aButtons': [
{
'sExtends': 'xls',
'sButtonText': 'Excel',
'sFileName': 'Article.xls'
},
{
'sExtends': 'print',
},
{
'sExtends': 'pdf',
'sFileName': 'Article.pdf',
'bFooter': false
},
],
'sSwfPath': '//cdn.datatables.net/tabletools/2.2.4/swf/copy_csv_xls_pdf.swf'
You need to add "columns" to show (skipping as not to show) as example below:
{extend: 'print',
titleAttr: 'Print the results',
title: '',
exportOptions: {
columns: ':visible',
stripHtml: false,
**columns: [1, 2, 5, 6, 8, 9, 10]**,
},
text: '<i class="fa fa-print fa-lg text-success"></i>',
message: 'REPORT NAME' ,
customize: function (win) {
$(win.document.body)
.css('font-size', '10pt')
.prepend(
'<img src="" style="position:absolute; top:0; left:0;" />'
);
$(win.document.body).find('table')
.addClass('compact')
.css('font-size', 'inherit');
}
}
I know that frozen columns does not work if Sub-Grid is enabled from http://www.trirand.com/jqgridwiki/doku.php?id=wiki:frozencolumns.
My understanding is that frozen does not work in the parent grid but it should work in the Sub-grid?
But when I try frozen column in sub grid it does not work? Does it mean frozen columns does not work in both the parent and Sub-grid.
If you use subgrid as grid then jqGrid just creates empty <div> in the "subgrid row" where any information can be placed. So you can create for example new grid with any features in the div. You can create grid with frozen columns of cause.
I created the demo for you by modifying the demo from an old answer. The results looks like below
I marked the header of frozen columns using CSS
.ui-jqgrid .frozen-div .ui-th-column { background: #f0dcdd; color: black; }
The code of subgrid is the following
subGrid: true,
subGridRowExpanded: function (subgridId, rowid) {
var $subgrid = $("<table id='" + subgridId + "_t'></table>");
$subgrid.appendTo("#" + subgridId);
$subgrid.jqGrid({
datatype: "local",
data: $(this).jqGrid("getLocalRow", rowid).files,
colNames: ["Name", "Filetype", "col3", "col4"],
colModel: [
{name: "name", width: 130, key: true, frozen: true},
{name: "filetype", width: 130, frozen: true},
{name: "col3", width: 130},
{name: "col4", width: 130}
],
height: "100%",
rowNum: 10,
sortname: "name",
shrinkToFit: false,
autowidth: true,
idPrefix: "s_" + rowid + "_"
}).jqGrid("setFrozenColumns");
}
I use shrinkToFit: false to prevent default shrinking of columns of subgrids together with autowidth: true which set the width of the subgrid.
The code works in jqGrid 3.7 or free jqGrid 3.8 which I published recently (see here and here), but in case of usage more old versions of jqGrid you can need to trigger jqGridAfterGridComplete event (see the answer).
I have a visualforce page and I am using jqgrid to display data on this page. The url that the jqgrid points to is a visualforce page(https://test.visual.force.com/apex/GridResults) which outputs only JSON data. This page does not have any header or html information.
The problem is that when I run this page, the grid renders with column names but no data.
When I run the url it outputs JSON data. I have pasted below the code.
jQuery("#list").jqGrid({
url:"https://test.visual.force.com/apex/GridResults",
datatype: "json",
colNames: [{!fieldNames}], -- property in controller which outputs fieldnames
colModel: [{!colModel}], -- property in controller which outputs column definition
rowNum: 10,
rowTotal:10,
rowList: [20, 40, 60],
loadonce:true,
mtype:"GET",
gridView:true,
pager: '#pager',
sortname: 'Record ID',
sortorder: "desc",
width: 1200,
height: 400,
caption: "Accounts"
});
jQuery("#list").jqGrid('navGrid', "#pager", { edit: true, add: true, del: false })
};
Any ideas on why the data from the page is not consumed by the jqgrid? Help much appreciated.
Have you look into Visualforce remoting?