How to sort a column in a table in an MVC view

Jaima Joseph

12y3.8k

Hi,

I have to sort a column in my mvc view, on click of a small icon in the table header part ascending and descending order alternatively.

Any help??

I tried the following code ,

table.sortable thead {

background-color: #eee;

color: #666666;

font-weight: bold;

cursor: default;

}

style>

var newTableObject = document.getElementById("myTable")

sorttable.makeSortable(newTableObject);

script>

But it is giving the following javascript error

0x800a01b6 - JavaScript runtime error: Object doesn't support property or method 'getAttribute' .

Please help....

5 Replies

Know the answer? Post it — somebody with the same question will find it here.

vijay krishna9y ago
use https in the src instead of http:
complete soruces code

Sort A Table

Person Monthly pay

Jan Molby £12,000

Steve Nicol £8,500

Steve McMahon £9,200

John Barnes £15,300

TOTAL £45,000
Jaima Joseph12y ago
It is not necessary to use a partial view.I have implemented it in normal MVC view before.But that script is not working in this view...that's why I am looking for a new solution... Thank you..
Anupam Singh12y ago
You can use PartialView for this kind of scenario.

Set action on table header and render partial view for the same.
Jaima Joseph12y ago
Sorry! I can not use webgrid,because through out our project we are using HTML tables... Thank you for your reply...
suman kalyan12y ago
Use webgrid u can easily sort

@{
    WebGrid grid = new WebGrid(Model, null, null, 30);
   }

@grid.GetHtml(tableStyle: "table table-bordered table-striped", headerStyle: "gridHead", footerStyle: "gridFooter", alternatingRowStyle: "gridAltRow",
    rowStyle: "gridRow",
    fillEmptyRows: true, numericLinksCount: 20,
columns: new[]
{
   grid.Column(header: "S.No",format: item => item.WebGrid.Rows.IndexOf(item) + count),
   grid.Column("Name","Name"),
   grid.Column("District.Name","District Name"),
    )
}
)