assets/js/jquery.dataTables.js
assets/js/jquery.dataTables.bootstrap.js
assets/js/jquery.dataTables.bootstrap.js
and modify the part that says //Pagination Buttons
var myTable =
$('#my-table')
.dataTable({
/**
sScrollY: "200px",//enable vertical scrolling
sScrollX: "100%",
sScrollXInner: "120%",//enable horizintal scrolling with its content 120% of its container
bScrollCollapse: true,
*/
bAutoWidth: false,//for better responsiveness
aoColumns": [
{ "bSortable": false },
null, null,null, null, null,
{ "bSortable": false }
]
})
aoColumns is an array containing info and options for each table column
and its element count should match the number of columns.
aoColumns and other options, please see the plugin's page.
.table-bordered)
you can wrap the table inside a .dataTables_borderWrap element first:
var myTable =
$('#my-table')
.wrap("<div class='dataTables_borderWrap' />")
.dataTable({
//options
});
assets/css/ui.jqgrid.css
assets/js/jqGrid/jquery.jqGrid.src.js
mustache/app/views/assets/scripts/jqgrid.js
label or jqGrid plugin will not send your data to server properly:
//inside colModel we have a checkbox
/**{name: 'stock', index: 'stock', width:70, editable: true, edittype: 'checkbox',
editoptions: {value:"Yes:No"}, unformat: aceSwitch},*/
//aceSwitch is the function which styles the checkbox
function aceSwitch( cellvalue, options, cell ) {
setTimeout(function(){
$(cell) .find('input[type=checkbox]')
.addClass('ace ace-switch ace-switch-5')
.after('<span class="lbl"></span>');
}, 0);
}
var parent_column = $(grid_selector).closest('[class*="col-"]');
$(window).on('resize.jqGrid', function () {
$(grid_selector).jqGrid( 'setGridWidth', $(".page-content").width() );
})
//optional: resize on sidebar collapse/expand and container fixed/unfixed
$(document).on('settings.ace.jqGrid' , function(ev, event_name, collapsed) {
if( event_name === 'sidebar_collapsed' || event_name === 'main_container_fixed' ) {
$(grid_selector).jqGrid( 'setGridWidth', parent_column.width() );
}
})