Skip to main content

Bootstrap Server Side Pagination - alternative to data tables

Background

Most of the Web developers are familiar with the Datatable.Net for pagination. DataTables can integrate seamlessly with Bootstrap using Bootstrap's table styling options to present a consistent interface with your Bootstrap driven site / app. The main disadvantage with Data table.net is it is applying the pagination at the client side and for the large data set it can take minutes to load the data. Like every other designer I also faced the problem with Data table.net. So what is the best option to replace the client side paging and searching. So I forced to create a custom module to do the pagination and searching. The below sample don’t support the sorting, but got an option to extend the functionality. Please check my Next Post for sorting functionality
The technologies used include, MVC 4.0, HTML5, Bootstarp.css, Knockout. js, Ajax, Web Api 2.0, Linq to SQL and C#.

Knockout.js Model’s

Filter Model

var filter = function () {
var self = this;
self.searchText = ko.observable('');
self.totalCount = ko.observable('0');
self.pageSize = ko.observable('10');
self.currentPageIndex = ko.observable('1');
self.sortBy = ko.observable('');
self.sortAscending = ko.observable(false);
self.countLabel = ko.observable("");
self.enablePrev = ko.observable(true);
self.enableNext = ko.observable(true);
self.totalPageCount = ko.observable('1');
self.individualPageList = ko.observableArray([]);
return self;
}
Adarsh Log Model
var adarshLog = function () {
var self = this;
self.Id = ko.observable('');
self.Name = ko.observable('');
return self;
}
Adarsh Log List Model (Binding both the filter and Adarsh log list)
var adarshLogListModel = function () {
var self = this;
self.adarshLogList = ko.observableArray([]);
self.filterModel = new ko.observable(new filter);
return self;
}

Knockout.js View Model for Adarsh Log

define(['genericContext', 'commonContext', 'logger', 'config', 'model'], function (datacontext, commonContext, logger, config, model) {
var viewModel = function () {
var self = this;
// Search Tip for Search Text Box
self.searchTip = function () {
$('[data-toggle="popover"]').popover()
}
// Help Text

self.searchTipText = ko.observable("Type search keyword....");

// Initialisation
self.adarshLogs = ko.observableArray([]);
self.adarshLogListModel = ko.observable(new model.adarshLogListModel);
self.filter = ko.observable(new model.filter);
self.individualPageList = ko.observableArray([]);

//Getting the records for intital Load
datacontext.getAllPost(self.adarshLogListModel, config.adarshLogUrl, model.adarshLogListModel, self.filter).always(function () {

var list = [];
self.adarshLogListModel().adarshLogList().forEach(function (item) {
var newRecord = new model.adarshLog();
ko.mapping.fromJS(item, {}, newRecord); //map the json into our oversvable object
list.push(newRecord);
});
self.adarshLogs(list);
// var newFilter = model.filter;
ko.mapping.fromJS(self.adarshLogListModel().filterModel(), {}, self.filter());
//(newFilter);
self.individualPageList(self.adarshLogListModel().filterModel().individualPageList());

if (self.filter().currentPageIndex() <= 1) {
self.filter().enablePrev(false);
}
if (self.filter().currentPageIndex() >= self.filter().totalPageCount()) {
self.filter().enableNext(false);
}
self.isBusy(false);

});

// Search fucntionality

self.searchItems = function (selected) {
self.filter().currentPageIndex(1);
datacontext.getAllPost(self.adarshLogListModel, config.adarshLogUrl, model.adarshLogListModel, self.filter).always(function () {
var list = [];
if (self.filter().currentPageIndex() <= 0) {
self.filter().enablePrev(false);
}
self.adarshLogListModel().adarshLogList().forEach(function (item) {
var newRecord = new model.adarshLog();
ko.mapping.fromJS(item, {}, newRecord); //map the json into our oversvable object
list.push(newRecord);
});
self.adarshLogs(list);
// var newFilter = model.filter;
ko.mapping.fromJS(self.adarshLogListModel().filterModel(), {}, self.filter());
//(newFilter);
self.individualPageList(self.adarshLogListModel().filterModel().individualPageList());
if (self.filter().currentPageIndex() <= 1) {
self.filter().enablePrev(false);
}
if (self.filter().currentPageIndex() >= self.filter().totalPageCount()) {
self.filter().enableNext(false);
}
self.isBusy(false);
});
}

// Previous Page Click
self.previousPage = function () {
if (self.filter().currentPageIndex() > 1) {

var list = [];
self.filter().currentPageIndex(self.filter().currentPageIndex() - 1);
datacontext.getAllPost(self.adarshLogListModel, config.adarshLogUrl, model.adarshLogListModel, self.filter).always(function () {
if (self.filter().currentPageIndex() <= 0) {
self.filter().enablePrev(false);
}
self.adarshLogListModel().userList().forEach(function (item) {
var newRecord = new model.adarshLog();
ko.mapping.fromJS(item, {}, newRecord); //map the json into our oversvable object
list.push(newRecord);
});
self.adarshLogs(list);
// var newFilter = model.filter;
ko.mapping.fromJS(self.adarshLogListModel().filterModel(), {}, self.filter());
//(newFilter);
self.individualPageList(self.adarshLogListModel().filterModel().individualPageList());
if (self.filter().currentPageIndex() <= 1) {
self.filter().enablePrev(false);
}
if (self.filter().currentPageIndex() >= self.filter().totalPageCount()) {
self.filter().enableNext(false);
}
self.isBusy(false);
});
}
else {
self.filter().enablePrev(false);
}
}

//Next page Click
self.nextPage = function () {
if (self.filter().currentPageIndex() <= self.filter().totalPageCount() - 1) {
var list = [];
self.filter().currentPageIndex(self.filter().currentPageIndex() + 1);
datacontext.getAllPost(self.adarshLogListModel, config.adarshLogUrl, model.adarshLogListModel, self.filter).always(function () {
if (self.filter().currentPageIndex() <= 0) {
self.filter().enablePrev(false);
}
self.adarshLogListModel().adarshLogList().forEach(function (item) {
var newRecord = new model.adarshLog();
ko.mapping.fromJS(item, {}, newRecord); //map the json into our oversvable object
list.push(newRecord);
});

self.adarshLogs(list);
// var newFilter = model.filter;
ko.mapping.fromJS(self.adarshLogListModel().filterModel(), {}, self.filter());
self.individualPageList(self.adarshLogListModel().filterModel().individualPageList());
if (self.filter().currentPageIndex() <= 0) {
self.filter().enablePrev(false);
}
if (self.filter().currentPageIndex() >= self.filter().totalPageCount()) {
self.filter().enableNext(false);
}
self.isBusy(false);
});
}
else {
self.filter().enableNext(false);
}
}
//Click on Any Specific Page

self.currentPage = function (index) {
self.filter().currentPageIndex(index);

var list = [];

datacontext.getAllPost(self.adarshLogListModel, config.adarshLogUrl, model.adarshLogListModel, self.filter).always(function () {
self.adarshLogListModel().adarshLogList().forEach(function (item) {
var newRecord = new model.adarshLog();
ko.mapping.fromJS(item, {}, newRecord); //map the json into our oversvable object
list.push(newRecord);
});
self.adarshLogs(list);
// var newFilter = model.filter;
ko.mapping.fromJS(self.adarshLogListModel().filterModel(), {}, self.filter());
//(newFilter);
self.individualPageList(self.adarshLogListModel().filterModel().individualPageList());
if (self.filter().currentPageIndex() <= 1) {
self.filter().enablePrev(false);
}
if (self.filter().currentPageIndex() >= self.filter().totalPageCount()) {
self.filter().enableNext(false);
}
self.isBusy(false);

});

}
};
return viewModel;
}
});

Generic Context. Js

define(['services/logger', 'config'],
function (logger, config) {
getAllPost = function (objectObservable, baseUrl, baseModel, filter) {
var list = [];

var options = {
url: baseUrl + 'GetAll',
data: ko.toJSON(filter),
type: "Post",
contentType: "application/json",
dataType: 'json'

};

return $.ajax(options).then(querySuccess);

function querySuccess(data) {
ko.mapping.fromJS(data, {}, objectObservable);
};
};

var datacontext = {
getAllPost: getAllPost,
};

return datacontext;
});


Filter.cs C# Model

public class Filter
{
public int TotalCount { get; set; }
public int PageSize { get; set; }
public int CurrentPageIndex { get; set; }
public string SortBy { get; set; }
public bool SortAscending { get; set; }
public string SearchText { get; set; }
public string Source { get { return SystemConfig.GetSourceName; } }
public string CountLabel
{
get
{
int progressCountStart = ((CurrentPageIndex - 1) * PageSize) + 1;
int progressCountEnd = (CurrentPageIndex) * PageSize;
if (progressCountEnd > TotalCount)
{
progressCountEnd = TotalCount;
}
return "Showing " + progressCountStart + " to " + progressCountEnd + " of " + TotalCount;
}
}

public int TotalPageCount
{
get
{
int count = 1;
if (TotalCount > 0 && PageSize > 0)
{
double dec = Math.Ceiling((double)TotalCount / PageSize);
count = Convert.ToInt32(dec);
}


return count;
}
}

public List IndividualPageList
{
get
{
List result = new List();
int midPoint = 5;
int totalPagesShowing = 10;
if (TotalPageCount <= totalPagesShowing)
{
for (int i = 1; i <= TotalPageCount; i++)
{
result.Add(i);
}

return result;
}

//Total Page showing 10. Midpoint took as 5. So left is 4 pages and right is 5 pages.
int startpoint = CurrentPageIndex - (midPoint - 1);
int endpoint = CurrentPageIndex + midPoint;

if (startpoint < 1)
{
int surplus = midPoint - CurrentPageIndex;
startpoint = 1;
endpoint = endpoint + surplus;
}

if (endpoint > TotalPageCount)
{
int surplus = endpoint - TotalPageCount;
startpoint = startpoint - surplus;
endpoint = endpoint - surplus;
}

for (int i = startpoint; i <= endpoint; i++)
{
result.Add(i);
}

return result;
}
}

}

Get All WebApi Controller Method

[HttpPost]
public HttpResponseMessage GetAll(Filter filter)
{
HttpResponseMessage response = new HttpResponseMessage(HttpStatusCode.OK);
try
{
var adarshlogList = adarshLogExtended.GetAll(ref filter);
AdarshLogListModel result = new AdarshLogListModel();
result.AdarshLogList = adarshlogList;
result.FilterModel = filter;
response.Content = new ObjectContent(result, GlobalConfiguration.Configuration.Formatters.JsonFormatter);
}
catch (Exception ex)
{
response.StatusCode = HttpStatusCode.BadRequest;
response.ReasonPhrase = ex.Message;
}

return response;
}


GetAll Repository Method

public List GetAll(ref Filter filter)
{

IQueryable adarshLogList = context.AdarshLog;
if (adarshLogList != null)
{
if (filter != null)
{
filter.TotalCount = adarshLogList.Count();
string searchText = filter.SearchText.ToUpper().Trim();

if (!string.IsNullOrWhiteSpace(searchText))
{

filter.TotalCount = (from p in adarshLogList
where ((p.Name != null && p.Name.ToUpper().Trim().Contains(searchText)) || (p.Id!= null && p.Id.ToString.Contains(searchText)))
select p).Count();

adarshLogList = (from p in adarshLogList
where ((p.Name != null && p.Name.ToUpper().Trim().Contains(searchText)) || (p.Id!= null && p.Id.ToString.Contains(searchText)))
orderby p.AddedDate descending
select p).Skip((filter.CurrentPageIndex - 1) * filter.PageSize).Take(filter.PageSize);
return adarshLogList.ToList();
}
else
{
var pagedList = (from p in adarshLogList
orderby p.AddedDate descending
select p).Skip((filter.CurrentPageIndex - 1) * filter.PageSize).Take(filter.PageSize);

return pagedList.ToList();
}

}
}
return null;
}


Views

Search.cshtml User Control
Footer.cshtml footer User Control

Comments

  1. laxmicynixit12 August 2021 at 15:52

    Thank you for sharing wonderful information with us to get some idea about it.
    Oracle OSB Training
    soa Online Training Hyderabad
    tableau certification training

    ReplyDelete
  2. Anonymous24 March 2022 at 13:26

    Merkur 34C Review - Shootercasino
    The Merkur 우리 계열 샌즈 카지노 34C is a Merkur 4-piece double 메리트 카지노 조작 edge safety razor with 출장마사지 a polished chrome finish. It has 더킹카지노 조작 a short handle 메리트 카지노 조작 and features a closed comb head for

    ReplyDelete

Post a Comment

Popular posts from this blog

Bootstrap Server Side Sorting Cont....

On my previous post   I had already mentioned about how to apply the sort to Bootstrap paginated tables. By making the following changes server side sorting can be achieved along with pagination. On Filter Model self.sortBy = ko.observable( 'Id' );//Default sort Column self.sortAscending = ko.observable( false ); self.iconType = ko.observable( 'glyphicon glyphicon-chevron-down' ); // Icon to appear near Column No Changes to Adarsh Log Model or Adarsh Log list Model Knockout.js View Model for Adarsh Log Changes Add the sortTable  method to it self.sortTable = function (viewModel, e) {             var columClicked = $(e.target).attr( "data-column" )             var sortAscending = (self.filter().sortAscending() === true ) ? false : true ;             self.filter().sortAscendi...
Post a Comment
Read more

Emergence and Creative Confidence

I started my career on 1st of September 2008 as a software developer at Manchester. Some people in my personal life might know about it. I like to say, that day as the day I found an aura in my life, transformation from the worst possible situation into a new beginning in a matter of 1 hour. The week before, I got an interview confirmation from that company and I was not at all excited about it because I know it is going to be the final interview in UK if I am unsuccessful. I was in that mental state because I was not successful for past 12 such occurrences and not expecting anything different. This shows I was not a brilliant person but had a strong passion and hardworking nature to achieve success. I passed my masters on Sep 2007 and after that, I decided to work only in software development, and lots of people including my parents told this as a worst possible decision. To be precise, they have no issues in choosing software development, but on my adamant decision only software de...
1 comment
Read more

Single page application (SPA) using ext.js

what is spa? Single page application are applications that fit in one page with rich and fluid user experiences like a desktop based applications. Why is SPA? All web based elements (html, CSS,javascript) are downloaded from the server on single page load and avoid the continuous page post back. i can explain what this mean. Suppose your web application is made of certain flow and it consists of 5 different pages. Each page need to get data from the user and save before moving to the next page. So when we navigate from one page to other it need to make a round trip to server to store the data in one page and get the data for the next page to display. but in spa we can avoid the continuous post backs. The whole page will not post back any time other than the first load. But it communicate to the server dynamically behind the scene and can achieve the same functionality. Spa using ext.js designing a SPA using ext.js is a challenging task if you are unaware about the ext.js ...
4 comments
Read more