Paging And Sorting In jTable Using MVC

Sourabh Somani
8y
18.7k
0
4

Article

Introduction

In this article I will explain how you can perform paging and sorting in jTable using MVC. But before preceding further in this article please read my previous article since this article is completely based on my previous article.

CRUD Operation In jTable Using MVC

In my previous article I have explained you how to perform CRUD operation in jTable using MVC and the output of my previous article is as in the following:

In this article I am going to explain to you how to perform paging and sorting.

Paging in jTable: To perform paging in jTable using MVC you have to follow the below given steps:

Step 1: Open Script.js file which we have created in our previous article and write the following lines and update your code.

Step 2: After writing these two lines of code in your Script.js file, lets run the project and output will be as in the following:

Now you can see above we have one table footer there, where we can see complete pagination option. But all the options are not looking and working perfectly. To make it perfect you have to change into action code of listAction. In this example we have listAction Action with name "GetStudentMarks", which is located inside MarksController. So we have to modify inside this.

Step 3: Modify GetStudentMarks action method. To modify it follow the below steps:

Open MarksController.
Go to GetStudentsMarks Action.
Add two parameter jtStartIndex and jtPageSize.
and write the code for pagination.

I am explaining the above steps using the following figure. In the figure you can see what changes I have done in my GetStudentMarks action method.

Step 4: Run this project

In the above output you can see still we have bug that number of records are undefined and page options are blank.

Step 5:

We are getting this problem because to the client we are not showing how many records exactlyare present in the database so we have to tell this jTable Grid that we have as many records that can be possible by setting TotalRecordCount property's value from controller. So go to the GetStudentMarks action and write following code:

Step 6: Run the Project and see your output it will work perfectly.

Output:

So we have completed how to perform paging in jTable. Now our Next task is perform sorting in jTable.

Sorting in jTable : To perform sorting in jTable using MVC you have to follow following steps:

Step 1: Open Script.js and set sorting property to true.

Step 2: Run the project you will get output as following:

Now you can see inthe above figure that after setting sorting property to true some sorting icons are generated in all headers. But there is no use to sort Total Marks. so we can remove sorting icons for Total Marks.

Step 3: Disable Sorting for Total Marks Column.

Step 4: To perform sorting functionality we have to write some functionality inside GetStudentMarks action method which will be as follows:

In jTable sorting apply like "FieldName ASC|DESC ". So I have created cases like above.

Step 5: Now open Script.js set defaultSorting to RollNumber ASC. Because when first time data will be load then it will be sorted by RollNumber.

Step 6: Finally build your project and run that. Your Output will be look like as following:

Output: Sorting By Roll Number in ascending order,

Sorting By Roll Number in descending order,

Sorting By Name in ascending order.

Sorting By Name in descending order.

Important Links