I have a grid and I would like giving a pagination size of 10, I want to select all options to restrict row selection to only 10, but given this configuration, it selects entire data set across all pages.
$scope.gridEvents = {
enableSorting : true,
enableSelectAll: true,
enableColumnResize: true,
enablePaginationControls: false,
rowHeight: 27,
enableScrollbars : true,
paginationPageSize : 10
}
any help is appreciated
Please try as shown below.
Working Plunker
JS
$scope.gridOptions = {
paginationPageSizes: [10, 20, 30],
paginationPageSize: 10,
useExternalPagination: true,
enableRowSelection: true,
enableSelectAll: true,
totalItems: 100,
columnDefs: [
{ name: 'name' },
{ name: 'gender' },
{ name: 'company' }
],
onRegisterApi: function(gridApi){
$scope.gridApi = gridApi;
$scope.gridApi.pagination.on.paginationChanged( $scope, function( currentPage, pageSize){
$scope.getPage(currentPage, pageSize);
});
}
};
$scope.getPage = function(pageNumber, pageSize){
var startingRow = pageSize * ( pageNumber - 1); // page number starts at 1, not zero
$http.get('https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json')
.success(function (data) {
var newData = [];
for( var i = startingRow; i < startingRow + $scope.gridOptions.paginationPageSize; i++ ) {
newData.push( data[i] );
}
$scope.gridOptions.data = newData;
});
};
$scope.getPage(1, 10);
Html
<div ui-grid="gridOptions" ui-grid-pagination ui-grid-selection class="grid"></div>
Related
Currently, I'm working on a datatable. In this datatable, we can modify the data of some columns.
But the problem is that once the user to modify a datum and that makes an interaction with the datatable that is to say "search, numberDisplay, ..." then the displayed data corresponds to the data of the AJAX request.
I'm on 1.11.1 version of "Jquery" and 1.9.4 for "dataTables"
Here is my code :
$(document).ready(function(){
var listeRespPosePlv = $('#listeRespPosePlv').val();
listeRespPosePlv = JSON.parse(listeRespPosePlv);
var listeRespPoseFormatted = [];
$(listeRespPosePlv).each(function(i, v){
listeRespPoseFormatted.push({'value': v.id_responsable_pose_plv, 'label': v.libelle});
});
$('#attribution_pose')[0].currentDataTable = $('#attribution_pose').dataTable({
"bProcessing": true,
"bServerSide": true,
"bStateSave": true,
'sAjaxSource': Router.url('campagne-plv-attribution'),
'aLengthMenu': [
[10, 25, 50, 1000, -1],
[10, 25, 50, 1000, "All"]
],
'iDisplayLength': 1000,
'fnServerParams' : function( aoData ) {
var idCampagnePlv = $('#id_campagne_plv').val();
aoData.push( { 'name': 'id_campagne_plv', 'value': idCampagnePlv } );
},
'fnDrawCallback': function(oSettings){
$('.datepicker').datepicker();
var table = this.fnGetData();
var test = $('#attribution_pose tbody tr');
for(var i = 0; i < table.length; i++){
for(var j = 0; j < table[i].length; j++){
if(table[i][j].localeCompare(test[i].cells[j].children[0].outerHTML) !== 0){
console.log('Diff');
}else{
console.log('Ok');
}
}
}
},
'oLanguage': {
'sUrl': Constante.get('base_full_url')+'assets/vendor/datatables/french.json'
}
}).columnFilter({
sPlaceHolder: "head:before",
aoColumns: [
{ type: "text" },
{ type: "text" },
{ type: "text" },
{ type: "text" },
{ type: "select" , values: listeRespPoseFormatted},
{ type: "text" },
{ type: "text" },
{ type: "text" },
null,
null,
null,
null,
{ type: "text" }
]
});
});
How can I avoid this?
Thank you for your help.
There is a data table with export to PDF or Excel and print buttons.But pagination doesn't appear. When I have looked examples most of them same as my project; when they put button, pagination doesn't appear. How can I solve the problem?
js code of Data table is below;
var oTable = $('#datatables').dataTable({
destroy: true,
"bSort": false,
dom: 'Bfrtip',
buttons: [
{
extend: 'excelHtml5',
footer: true ,
exportOptions: {
columns: [0, 1, 2, 3, 4,5,6,7]
}
},
{
extend: 'pdfHtml5',
exportOptions: {
columns: [0, 1, 2, 3, 4, 5]
},
customize: function (doc) {
//Remove the title created by datatTables
doc.content.splice(0, 1);
//Create a date string that we use in the footer. Format is dd-mm-yyyy
var now = new Date();
var jsDate = now.getDate() + '-' + (now.getMonth() + 1) + '-' + now.getFullYear();
// doc.pageMargins = [20, 60, 20, 30];
// Set the font size fot the entire document
doc.defaultStyle.fontSize = 9;
// Set the fontsize for the table header
doc.styles.tableHeader.fontSize = 9;
// Create a header object with 3 columns
// Left side: Logo
// Middle: brandname
// Right side: A document title
doc['header'] = (function () {
return {
columns: [
{
alignment: 'left',
italics: true,
text: 'dataTables',
fontSize: 18,
margin: [10, 0]
},
{
alignment: 'right',
fontSize: 14,
text: $("#drpIller option:selected").text() + " " + $("#drpIlceler option:selected").text()
}
],
margin: 20
}
});
doc['footer'] = (function (page, pages) {
return {
columns: [
{
alignment: 'left',
text: ['Oluşturulma tarihi: ', { text: jsDate.toString() }]
},
{
alignment: 'right',
text: ['page ', { text: page.toString() }, ' / ', { text: pages.toString() }]
}
],
margin: 20
}
});
var objLayout = {};
objLayout['hLineWidth'] = function (i) { return .5; };
objLayout['vLineWidth'] = function (i) { return .5; };
objLayout['hLineColor'] = function (i) { return '#aaa'; };
objLayout['vLineColor'] = function (i) { return '#aaa'; };
objLayout['paddingLeft'] = function (i) { return 4; };
objLayout['paddingRight'] = function (i) { return 4; };
doc.content[0].layout = objLayout;
}
},
{
extend: 'print'
}
],
"responsive": true,
"data": data,
"columns": [
{ "data": "A", "autoWidth": true},
{ "data": "S", "autoWidth": true},
{ "data": "D", "autoWidth": true },
{ "data": "E", "autoWidth": true},
{ "data": "F", "autoWidth": true },
{ "data": "G", "autoWidth": true }
],
"bAutoWidth": false
}
});
thanks your valuable for helps.
I found answer at this link:
https://codepen.io/RedJokingInn/pen/XMVoXL
It is abouth dom options.
It is solved When I write
"dom": '<"dt-buttons"Bf><"clear">lirtp'
instead
dom: 'Bfrtip'
tutorial at the link also consists printing page numbers and printing same sentence top of every pages informations.
May be can help someone in the future.
I have this code below to click a checkbox in my DataTable and get the IDs and store in an array. For Example I have a 2 seperate DataTables First is for President and second is for the Senators.
We know that we can only vote 1 in President and for Senators we can choose many.
My problem here is I can check how many checkboxes in the DataTables. How to limit the checked checkboxes?.
Still learning in bootstrap here.
JS Code
var dataTablestest = $("#tbltest").DataTable({
responsive: true,
processing: true,
info: true,
search: true,
stateSave: true,
order: [[1, "asc"], [2, "asc"]],
lengthMenu: [[50, 100, 200, -1], [50, 100, 200, "All"]],
ajax: { "url": "/Voting/LoadTableTest" },
columns:
[
{ data: "testID", title: "", visible: false, searchable: false },
{ data: "Fullname", title: "FullName", sClass: "alignRight" },
{ data: "Position", title: "Position", sClass: "alignRight" },
{ data: "party", title: "Party", sClass: "alignRight" },
{ data: "ActionMenu", title: "Click to vote", searchable: false, orderable: false, sClass: "alignCenter",
"mRender": function (data) {
return '<center><label><input class="checkId" type="checkbox" id="chkvote_' + data + '" value=""/></label></center>';
}
}
]
});
var arrayIds = [];
$('#tbltest tbody').on('click', 'tr', function (e) {
if ($(e.target).is(".checkId")) {
var Ids = dataTablestest.row(this).data().testID;
arrayIds.push(Ids);
return
}
});
EDIT
I found an answer but there is a problem with it. My counter keeps increment every time I check a checkbox from my dataTable.
$('#tbltest tbody').on('click', 'tr', function (e) {
if ($(e.target).is(".checkId")) {
if ($(e.target).is(":checked") == true) {
CheckCount = CheckCount + 1;
var Ids = dataTablestest.row(this).data().testID;
if (CheckCount > 1) {
return false;
}
arrayIds.push(Ids);
return
}
else {
CheckCount = parseInt(CheckCount) - parseInt(1);
}
}
});
I use this code below.. Thanks to all who view my thread.
var arrayIds = [];
$('#tbltest tbody').on('click', 'tr', function (e) {
if ($(e.target).is(".checkId")) {
var Ids = dataTablestest.row(this).data().testID;
if ($(e.target).is(":checked") == true) {
var lenArray = arrayIds.length;
if (lenArray < 1) {
arrayIds.push(Ids);
} else {
return false;
}
}
else {
for (var i = arrayIds.length - 1; i >= 0; i--) {
if (arrayIds[i] === Ids) {
arrayIds.splice(i, 1);
}
}
}
}
return;
});
Here in my code if I run this independently it works fine, but after integrate in my project the "onRegisterApi" method call twice. It seems some conflict with existing Ui-Grid.
Can Anyone have any idea? How to debug this and find the root cause. I already spend so much time on this
var app = angular.module('app', ['ngTouch', 'ui.grid', 'ui.grid.pagination']);
app.controller('MainCtrl', [
'$scope', '$http', 'uiGridConstants', function($scope, $http, uiGridConstants) {
var paginationOptions = {
pageNumber: 1,
pageSize: 25,
sort: null
};
$scope.gridOptions = {
paginationPageSizes: [25, 50, 75],
paginationPageSize: 25,
useExternalPagination: true,
useExternalSorting: true,
columnDefs: [
{ name: 'name' },
{ name: 'gender', enableSorting: false },
{ name: 'company', enableSorting: false }
],
onRegisterApi: function(gridApi) {
$scope.gridApi = gridApi;
$scope.gridApi.core.on.sortChanged($scope, function(grid, sortColumns) {
if (sortColumns.length == 0) {
paginationOptions.sort = null;
} else {
paginationOptions.sort = sortColumns[0].sort.direction;
}
getPage();
});
gridApi.pagination.on.paginationChanged($scope, function (newPage, pageSize) {
paginationOptions.pageNumber = newPage;
paginationOptions.pageSize = pageSize;
getPage();
});
}
};
var getPage = function() {
// server call
};
getPage();
}
]);
I am getting the error "Type Error: i.grid is null" on page or page size change in JQ Grid pager with server side pagination:
How can I fix it? This is my code:
<script>
$("#list1").jqGrid({
url: "GetNotesReportDetails",
postData: { BillStatus: status, pageNumber: pageNumber, PageSize: PageSize },
datatype: "json",
mtype: "POST",
colNames: ["ID", "First Name", "Last Name", ],
colModel: [
{ name: "ID", index: "ID", hidden: true, key: true },
{ name: "FirstName", index: "FirstName", width: 50, align: "left", sortable: true },
{ name: "LastName", index: "LastName", width: 50, align: "left", sortable: true },
],
multiselect: true,
rowNum: 20,
rowList: [5, 10, 20, 50, 100],
width: 1200,
height: "100%",
pager: $("#pager1"),
viewrecords: true,
cellEdit: true,
sortorder: "asc",
sortable: true,
loadonce: true,
hidegrid: false,
ignoreCase: true,
caption: "Reports List",
loadComplete: function (data) {
var page = $('#list1').jqGrid('getGridParam', 'page');
var lastpage = $("#list1").getGridParam('lastpage');
if ($("#hdnPageNumber").val() == "") {
$(".ui-pg-input").val(1);
}
else {
$(".ui-pg-input").val($("#hdnPageNumber").val());
}
$("#hdnTotalRows").val(data.total);
var currentPage = parseInt($(".ui-pg-input").val());
var lastPage = parseInt($("#hdnTotalRows").val());
var PageSize = parseInt($(".ui-pg-selbox", this.p.pager).val());
var TotalPages = data.total <= PageSize ? 1 : Math.ceil(data.total / PageSize);
$("#sp_1_pager1").text(data.total <= PageSize ? 1 : Math.ceil(data.total/PageSize));
var currentRecordCount = parseInt($("#list1").getGridParam("reccount"));
var a = PageSize * (currentPage - 1) + 1;
var b = currentRecordCount * currentPage;
var c = lastPage;
$(".ui-paging-info").html("View " + a + "-" + b + " 0f " + c);
if (currentPage < TotalPages) {
$('#next_pager1').removeClass('ui-state-disabled');
$('#last_pager1').removeClass('ui-state-disabled');
$('#prev_pager1').removeClass('ui-state-disabled');
$('#first_pager1').removeClass('ui-state-disabled');
}
else {
$('#next_pager1').addClass('ui-state-disabled');
$('#last_pager1').addClass('ui-state-disabled');
}
if (currentPage == 1) {
$('#prev_pager1').addClass('ui-state-disabled');
$('#first_pager1').addClass('ui-state-disabled');
}
},
onPaging: function (pgButton) {
var pagerId = this.p.pager.substr(1);
var currentPage = parseInt($(".ui-pg-input").val());
var lastPage = parseInt($("#hdnTotalRows").val());
if (currentPage - 1 == lastPage - 1)
$("#list1").setGridParam({ page: lastPage }).trigger("reloadGrid");
var currentRecordCount = $("#list1").getGridParam("reccount");
var recordsPerPage = $("#list1").getGridParam("rowNum");
var PageSize = $(".ui-pg-selbox", this.p.pager).val();
var newValue = 0;
if (pgButton.indexOf("next") >= 0)
currentPage = ++currentPage;
else if (pgButton.indexOf("prev") >= 0)
currentPage = --currentPage;
else if (pgButton.indexOf("last") >= 0)
currentPage = $("#gridId").getGridParam('lastpage');
else if (pgButton.indexOf("first") >= 0)
currentPage = 1;
currentRecordCount = $("#list1").getGridParam("reccount");
$("#hdnPageNumber").val(currentPage);
$("#hdnPageSize").val(PageSize);
bindReports("1", currentPage, PageSize);
$(".ui-pg-selbox").val(PageSize);
}
}).navGrid("#pager1", { refresh: false, excel: true, add: false, edit: false, del: false }, {},
{},
{},
{ sopt: ["cn"] }
);
jQuery("#list1").jqGrid('filterToolbar', { stringResult: true, searchOnEnter: false, defaultSearch: "cn" });
</script>