如何使用DataTables服务器端列排序?

时间:2016-08-18 11:09:02

标签: c# jquery asp.net-mvc datatables

我们有一个DataTable,其中包含如下数据:

<table class="display" id="invoiceTable">
    <thead>
        <tr id="headingRow">
            <th>Sys_InvoiceID</th>
            <th>Details</th>
            <th>Inc.In Turnover</th>
            <th>Status</th>
            <th>Invoice No.</th>
            <th>Invoice Date</th>
            <th>Type</th>
            <th>Supplier Invoice No.</th>
            <th>Account Number</th>
            <th>Supplier</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>Details1</td>
            <td>Yes</td>
            <td>Issue</td>
            <td>500</td>
            <td>18/08/2016</td>
            <td>Type1</td>
            <td>111111</td>
            <td>56565</td>
            <td>SupplierID</td>
        </tr>
    </tbody>
</table>

jQuery to initiali s e DataTable看起来像这样:

$(document).ready(function(){
var table = $('#invoiceTable').DataTable({
        dom: 'rti',
        ajax: {
            "url": filterDataLink,
        },
        serverSide: true,
        "order": [[5, 'asc']],
        searching: false,
        paging: true,
        scrollX: true,
        scrollY: "75vh", //70% of the window height
        processing: false,
        ordering: true,
        scroller: {
            loadingIndicator: true,
            displayBuffer: 20
        }
    });
});

C#方法如下所示:

public string FilterData(TableFilterItem tableFilterItem)
{
    try
    {
        if (tableFilterItem.ColumnOrder == null || tableFilterItem.ColumnOrder.First() == null)
            tableFilterItem.ColumnOrder = new List<ColumnOrder>();


        SessionModel sessionModel = (SessionModel)Session["Filters"];
        DataTableReturn output = _homeManager.ReturnDataTableSession(sessionModel, tableFilterItem);
        Session["Filters"] = output.SessionModel;

        return output.DataTable;
    }
    catch (Exception ex)
    {
        return "An error occurred, please try later! " + ex.Message;
    }
}

TableFilterItem看起来像这样:

public class TableFilterItem {
    public TableFilterItem() {

    }
    public int Start { get; set; }
    public int Length { get; set; }
    public int Draw { get; set; }

    public int order { get; set; }

}

我们稍后在应用程序中还有另一个AJAX调用,它调用C#方法来返回数据。当点击一个列时,它会调用该方法,但我不知道该方法中的属性将由DataTables填充,以便我可以访问排序。

编辑:它的初始化没有初始化。我不是美国人。

2 个答案:

答案 0 :(得分:1)

我建议使用datatables.mvc5包,它是Stefan Nuxoll实现的控制器的数据表模型绑定器。

您的行动如下:

public ActionResult Get([ModelBinder(typeof(DataTablesBinder))] IDataTablesRequest requestModel)
{

  IQueryable<asset> query = DbContext.Assets;

  // Sorting
  var sortedColumns = requestModel.Columns.GetSortedColumns();
  var orderByString = String.Empty;

  foreach (var column in sortedColumns)
  {
     orderByString += orderByString != String.Empty ? "," : "";
     orderByString += (column.Data) + (column.SortDirection == Column.OrderDirection.Ascendant ? " asc" : " desc");
  }

    query = query.OrderBy(orderByString == string.Empty ? "BarCode asc" : orderByString);

   var data = query.Select(asset => new
   {
      AssetID = asset.AssetID,
      BarCode = asset.Barcode,
      Manufacturer = asset.Manufacturer,
      ModelNumber = asset.ModelNumber,
      Building = asset.Building,
      RoomNo = asset.RoomNo,
      Quantity = asset.Quantity
   }).ToList();

 return Json(new DataTablesResponse(requestModel.Draw, data, filteredCount, totalCount), JsonRequestBehavior.AllowGet);

}

并且您的数据表jquery代码将类似于:

$('#assets-data-table').DataTable({
    "serverSide": true,
    "processing": true,
    "ajax": {
        "url": "@Url.Action("Get","Asset")"
    },
    "columns": [
        { "title": "Bar Code", "data": "BarCode", "searchable": true },
        { "title": "Manufacturer", "data": "Manufacturer", "searchable": true },
        { "title": "Model", "data": "ModelNumber", "searchable": true },
        { "title": "Building", "data": "Building", "searchable": true },
        { "title": "Room No", "data": "RoomNo" },
        { "title": "Quantity", "data": "Quantity" }
    ],
    "lengthMenu": [[10, 25, 50, 100], [10, 25, 50, 100]],
});

您可以查看this post (Server Side Searching, Paging and Sorting using Jquery DataTables)

答案 1 :(得分:0)

对于服务器端数据表,每个ajax调用都有这么多的参数,其中一个是: iSortCol_0:0 。这里0表示在页面加载时保持索引的索引。

当您单击其他列时,它将更改为: iSortCol_0: 1 即可。因此,在您的服务器端脚本中获取此索引并相应地维护索引。