how to do sorting in MVC in tables without refreshing page?

Question

1.00/5 (1 vote)

See more:

, +

Show me some examples that i can use in my project with details

JavaScript

function Sorting(columnName, cityId, tabid) {
    if (sort == "ASC") {
        sort = "DESC";
    } else {
        sort = "ASC";
    }
    $.ajax({
        type: "GET",
        contentType: 'application/json',
        url: "/VisitorList/Sorting",
        data: {
            Id: currentPage,
            cityId: cityId,
            searchType: tabid,
            columnName: columnName,
            sortType: sort
        },
        success: function (data) {
            $('#divVisitorsList').html(data);
            sort = data.Sort_Direction;
        }
    });
}

$('.sorting').click(function (evt) {
    var columnName = $(this).text();
    var cityId = $('#ddlLocation').val();
    var tabid = $(".VisitorActiveTab").find('.active').attr('id');
    Sorting(columnName, cityId, tabid)
});

Posted 6-Oct-15 3:13am

Chivillaz

Updated 6-Oct-15 3:33am

Palash Mondal_

v3

Add a Solution

3 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Member 12003400 · Answer 1 · 2015-10-06T03:18:00

Solution 1

Use jquery datatable to bind your table. Which will give you sorting,paging all functionalities by default without refreshing page.

can refer this link
https://datatables.net/examples/basic_init/table_sorting.html[^]

Posted 6-Oct-15 3:18am

Member 12003400

Comments

Chivillaz 6-Oct-15 10:26am

is not working

Krunal Rohit · Answer 2 · 2015-10-06T03:40:00

Solution 3

In your sorting action method, return the partial view with the data, and on jquery ajax success call, replace your table with new data.

C#

public ActionResult Sorting(your params)
{
    // your logic
    return PartialView("_PartialViewName.cshtml", result);
}

JavaScript

$.ajax({
    type: "GET",
    contentType: 'application/json',
    url: "/VisitorList/Sorting",
    data: { Id: currentPage, cityId: cityId, searchType: tabid, columnName: columnName, sortType: sort },
    success: function (data) {
            $('#divVisitorsList').replaceWith(data);  // this is important
            sort = data.Sort_Direction;
        }
});

-KR

Posted 6-Oct-15 3:40am

Krunal Rohit

Comments

Chivillaz 6-Oct-15 9:44am

how can i show a value of sort_direction ,this is the property of one of my domain class
i used a alert(data.sort_Direction);
but its shows undefined,because it return the whole div content but i want only the particular value of the Sort_direction

Krunal Rohit 6-Oct-15 14:01pm

http://www.asp.net/mvc/overview/getting-started/getting-started-with-ef-using-mvc/sorting-filtering-and-paging-with-the-entity-framework-in-an-asp-net-mvc-application

Refer this, you'll get an idea ;)

-KR

Chivillaz 7-Oct-15 0:58am

its working but the whole page is refreshing but i want to refresh only div tag

Chivillaz 7-Oct-15 1:00am

i have already tried that earlier on..

Chivillaz 7-Oct-15 1:20am

anything else

Krunal Rohit 7-Oct-15 2:21am

I already gave you the code.

-KR

Chivillaz 7-Oct-15 2:28am

its not working i can click the column only once not the second time

Palash Mondal_ · Answer 3 · 2015-10-06T03:31:00

Solution 2

Please refer to this great article on CP for full details on the implementation without any refresh:

Enhancing HTML tables using the jQuery DataTables plug-in[^]

Hope this helps!

Posted 6-Oct-15 3:31am

Palash Mondal_

Comments

Chivillaz 6-Oct-15 9:51am

i have used the above code but the problem is that sortingis happening only on page loading if i again click that same button its does not happen any more and i want to refresh only the div content not the whole page

Palash Mondal_ 6-Oct-15 10:00am

Try replacing

$('.sorting').click(function (evt) {

with

$(document).on('click', '.sorting', function (evt) {

Chivillaz 6-Oct-15 10:03am

not working its the same thing

Chivillaz 6-Oct-15 10:05am

and one thing after clicking one column the next column is not working on the same page load for do sorting by next column i have TO refresh the page

Palash Mondal_ 6-Oct-15 10:07am

Please post the /VisitorList/Sorting code. want to see what logic you are using to sort there.

Chivillaz 6-Oct-15 10:26am

ok

Chivillaz 6-Oct-15 10:27am

public ActionResult Sorting(string searchType, int cityId,int Id, string columnName, string sortType)
{
visitorListBL = new VisitorListBL();
VisitorListVM visitorListVM = new VisitorListVM();
visitorListVM = visitorListBL.GetAllTypeVisitorDetails(string.Empty, searchType, Convert.ToInt32(cityId), Id, UserId, columnName, sortType);

if (Convert.ToString(VisitorListType.CurrentCheckInVisitor) == searchType)
{
return PartialView("~/Views/VisitorList/_CheckInVisitorList.cshtml", visitorListVM);
}
if (Convert.ToString(VisitorListType.TodayAllInVisitor) == searchType)
{
return PartialView("~/Views/VisitorList/_VisitorList.cshtml", visitorListVM);
}
if (Convert.ToString(VisitorListType.VisitorHistory) == searchType)
{
return PartialView("~/Views/VisitorList/_VisitorList.cshtml", visitorListVM);
}
return View();
}

Philippe Mori 6-Oct-15 12:39pm

Please add code to your question and format it properly...

Chivillaz 6-Oct-15 10:30am

and my logic is:

public VisitorListVM GetAllTypeVisitorDetails(string searchText, string searchType, int cityId, int page, int UserId, [Optional] string columnName, [Optional]string sortType)
{
UserBL userBL = new UserBL();
VisitorListVM visitorListVM = new VisitorListVM();
visitorListVM.DefaultLocations = userBL.GetLocationList(UserId);
if (!string.IsNullOrEmpty(columnName) && !string.IsNullOrEmpty(sortType))
{
visitorListVM.Sort_Direction = sortType;
visitorListVM.SortField = columnName;
visitorListVM.PagedVisitorList = GetTypeVisitorDetails(searchText, searchType, cityId, page, columnName, sortType).ToPagedList(page);
}
else
{
visitorListVM.PagedVisitorList = GetTypeVisitorDetails(searchText, searchType, cityId, page).ToPagedList(page);
}

return visitorListVM;
}

Chivillaz 6-Oct-15 10:30am

public IQueryable<visitordm> GetTypeVisitorDetails(string searchText, string searchType, int cityId, int page, [Optional] string columnName, [Optional]string sortType)
{
List<visitordm> lstVistorDetails = new List<visitordm>();
using (VMSDBContext context = DAL.Instance.NewDefaultDbContext())
{
if (!string.IsNullOrEmpty(columnName) && !string.IsNullOrEmpty(sortType))
{
switch (columnName)
{

case "Visit Id":
IEnumerable<visitordm> CheckInVisitID = (sortType == "ASC" ?
GetCheckInVisitorList(cityId, page).OrderBy(objCheckInlist => objCheckInlist.Visit_id) :
GetCheckInVisitorList(cityId, page).OrderByDescending(objCheckInlist => objCheckInlist.Visit_id));
lstVistorDetails = CheckInVisitID.ToList();
break;
case "Office Location":
IEnumerable<visitordm> CheckInOfficeLocation = (sortType == "ASC" ?
GetCheckInVisitorList(cityId, page).OrderBy(objCheckInlist => objCheckInlist.OfficeLocation) :
GetCheckInVisitorList(cityId, page).OrderByDescending(objCheckInlist => objCheckInlist.OfficeLocation));
lstVistorDetails = CheckInOfficeLocation.ToList();
break;
case "Visitor Name":
IEnumerable<visitordm> CheckInVisitorName = (sortType == "ASC" ?
GetCheckInVisitorList(cityId, page).OrderBy(objCheckInlist => objCheckInlist.Name) :
GetCheckInVisitorList(cityId, page).OrderByDescending(objCheckInlist => objCheckInlist.Name));
lstVistorDetails = CheckInVisitorName.ToList();
break;
case "Visitor Mobile Number":
IEnumerable<visitordm> CheckInVisitorMobileNumber = (sortType == "ASC" ?
GetCheckInVisitorList(cityId, page).OrderBy(objCheckInlist => objCheckInlist.Mobile_number) :
GetCheckInVisitorList(cityId, page).OrderByDescending(objCheckInlist => objCheckInlist.Mobile_number));
lstVistorDetails = CheckInVisitorMobileNumber.ToList();
break;
case "Person To Meet":
IEnumerable<visitordm> CheckInPersonToMeet = (sortType == "ASC" ?
GetCheckInVisitorList(cityId, page).OrderBy(objCheckInlist => objCheckInlist.EmployeeName_to_visit) :
GetCheckInVisitorList(cityId, page).OrderByDescending(objCheckInlist => objCheckInlist.EmployeeName_to_visit));
lstVistorDetails = CheckInPersonToMeet.ToList();
break;
case "In Time":
IEnumerable<visitordm> CheckInInTime = (sortType == "ASC" ?
GetCheckInVisitorList(cityId, page).OrderBy(objCheckInlist => objCheckInlist.EmployeeName_to_visit) :
GetCheckInVisitorList(cityId, page).OrderByDescending(objCheckInlist => objCheckInlist.EmployeeName_to_visit));
lstVistorDetails = CheckInInTime.ToList();
break;
}

Chivillaz 6-Oct-15 10:33am

last one is the main part which is used to sort and the data retrieve part..take your time and kindle give me a solution

Chivillaz 6-Oct-15 10:40am

*kindly

Chivillaz 7-Oct-15 1:20am

give me solution