無法通過升序或降序對表頭進行排序

Question

默認情況下，“ View顯示一個排序的表，該表很好，但是不能通過Sort升序或降序單擊表標題來對表列進行排序。 標題欄箭頭在點擊時會上下移動，但數據保持不變。 我正在使用jQuery jTable，並且默認情況下啟用了排序。

是否可以通過使用jQuery來做到這一點？

這是我的代碼供您檢查：

視圖：

$(document).ready(function () {
    $('#TopPlayedInVenueContainer1').jtable({

        title: 'Top Tracks Played Records',
        paging: true,
        pageSize: 100,
        sorting: true,
        defaultSorting: 'Date ASC',

        actions: {
            listAction: '@Url.Action("TopPlayedInVenueList1")'

        },
        fields: {
            TrackID: {
                title: 'Track ID',
                key: true,
                create: false,
                edit: false,
                resize: false,
                tooltip: 'Track Name',
                sorting: true //This column is not sortable!
            },
            Date: {
                title: 'Date',
                type: 'date',
                displayFormat: 'dd - mm - yy',
                tooltip: 'DD - MM - YY',
                list: true,
                sorting: true //This column is not sortable!
            },
            TrackName: {
                title: 'Track Name',
                key: true,
                create: false,
                edit: false,
                resize: false,
                tooltip: 'Track Name',
                sorting: true //This column is not sortable!
            },
            ArtistName: {
                title: 'Artist Name',
                key: true,
                create: false,
                edit: false,
                resize: false,
                tooltip: 'Track Name',
                sorting: true //This column is not sortable!
            },
            Times: {
                title: 'Times',
                tooltip: 'Artist Name',
                sorting: false //This column is not sortable!
            }
        }
    });

    // All
    /////////////////////////////////////////////////////////////////////////////////////////////////////////////

    var todayDate = new Date();
    var endDate = todayDate.getDate() + '/' + (todayDate.getMonth() + 1) + '/' + (todayDate.getFullYear() + 100);
    var d = new Date();
    var st = d.setDate(todayDate.getDate() - 111365);
    var startDate = d.getDate() + '/' + (d.getMonth() + 1) + '/' + d.getFullYear();
    $('#allrecordsstart').val(startDate);
    $('#allrecordsend').val(endDate);
    $('#TopPlayedInVenueContainer1').jtable('load', {
        StartDate: startDate,
        EndDate: endDate
    });

    $('#allrecords').click(function (e) {
        e.preventDefault();
        var startDate = $('#allrecordsstart').val();
        var endDate = $('#allrecordsend').val();

        $('#TopPlayedInVenueContainer1').show(0).delay(0).fadeIn(1000).jtable('load', {
            StartDate: startDate,
            EndDate: endDate

        });
    });

控制器：編輯@CHash_Mile ..非常感謝:)這是代碼： 編輯：15/04/2014

[HttpPost]
    public JsonResult TopPlayedInVenueList1(string StartDate = "", string EndDate = "", int jtStartIndex = 0, int jtPageSize = 0, string jtSorting = null)
    {
        try
        {

            if (Request.IsAuthenticated == true)
            {
                string Path = @"C:\\5Newwithdate-1k.xls";
                OleDbConnection con = new OleDbConnection(@"Provider=Microsoft.Jet.OLEDB.4.0;Data Source= '" + Path + "';Extended Properties=" + (char)34 + "Excel 8.0;IMEX=1;" + (char)34 + "");
                OleDbDataAdapter da = new OleDbDataAdapter("select * from [Sheet1$]", con);
                con.Close();
                System.Data.DataTable data = new System.Data.DataTable();
                da.Fill(data);

                List<TopPlayed> daa = new List<TopPlayed>();

                foreach (DataRow p in data.Rows)
                {
                    TopPlayed top = new TopPlayed()
                    {
                        TrackID = Convert.ToInt32(p.Field<double>("TrackID")),
                        Date = p.Field<DateTime>("DateTimes"),
                        TrackName = p.Field<string>("TrackName"),
                        ArtistName = p.Field<string>("ArtistName"),
                        Times = Convert.ToInt32(p.Field<double>("Times"))
                    };

                    daa.Add(top);
                }

                var listOrder = daa.Where(i => i.Date >= Convert.ToDateTime(StartDate) && i.Date <= Convert.ToDateTime(EndDate)).ToList();

                if (jtStartIndex + 150 > listOrder.ToList().Count)
                {
                    int val = listOrder.ToList().Count - jtStartIndex;
                    jtPageSize = val;
                }

                var newlist = listOrder.OrderByDescending(i => i.Times).ToList().GetRange(jtStartIndex, jtPageSize);

                if (string.IsNullOrEmpty(jtSorting)) { jtSorting = "Date ASC"; }

                SortDirection sortDirection = jtSorting.ToLower().Contains("desc") ? SortDirection.DESC : SortDirection.ASC;
                string sortExpression = sortDirection == SortDirection.DESC ? jtSorting.ToLower().Replace(" desc", "") : jtSorting.ToLower().Contains(" asc") ? jtSorting.ToLower().Replace(" desc", "") : jtSorting;

                if (sortDirection == SortDirection.ASC)
                {
                 newlist = newlist.OrderBy(item => GetPropertyValue(item, sortExpression)).ToList();
                }
                else
                {
                 newlist = newlist.OrderByDescending(item => GetPropertyValue(item, sortExpression)).ToList();
                }

                return Json(new { Result = "OK", Records = newlist, TotalRecordCount = listOrder.ToList().Count });
            }
            return Json(new { Result = "ERROR" });
        }
        catch (Exception ex)
        {
            return Json(new { Result = "ERROR", Message = ex.Message });
        }
    }

使用Step Over逐行調試，似乎這行代碼是罪魁禍首：

newlist = newlist.OrderBy(item => GetPropertyValue(item, sortExpression)).ToList();

因為在這一行之后，我在瀏覽器中的View上收到錯誤消息：

Object reference not set to an instance of an object.

圖片：編輯@CHash_Mile ..非常感謝：)調試屏幕截圖：

sortExpression ---------- URL

newList ---------- URL

很抱歉花這么多時間為您為我做的事感到非常感謝！

Answer 1

使用Jtable示例檢查此排序

我看到您沒有使用變量jtSorting進行排序。 這提供了需要進行排序的屬性。 加載新列表后，嘗試以下代碼。

        SortDirection sortDirection = jtSorting.ToLower().Contains("desc") ? SortDirection.DESC : SortDirection.ASC;
    string sortExpression = sortDirection == SortDirection.DESC ? jtSorting.ToLower().Replace(" desc", "") : jtSorting.ToLower().Contains(" asc") ? jtSorting.ToLower().Replace(" desc", "") : jtSorting;

    if (sortDirection == SortDirection.ASC)
            {
                newlist = newlist.OrderBy(item => GetPropertyValue(item, sortExpression))).ToList();
            }
            else
            {
                newlist = newlist.OrderByDescending(item => GetPropertyValue(item, sortExpression))).ToList();
            } 

添加以下方法-

    public static object GetPropertyValue(object obj, string propertyName)
    {
        return obj == null ? null : obj.GetType().GetProperty(propertyName).GetValue(obj, null);
    }

在課程內添加以下枚舉-

內部枚舉SortDirection {ASC，DESC}