1

我正在提取原始 JSON 来填写我的 DataTable。

问题是分页和排序之类的东西不起作用。

我不是从数据库中提取信息,我实际上是从 AWS 中提取数据。

从 AWS --> 缓存文件 --> JSON --> 数据表。

我的 JSON 看起来像这样:

{
"count": 332,
"data": [
  {
  "account": "NetOps",
  "architecture": "x86_64",
  "block_devices": [
    {
      "delete_on_terminate": true,
      "name": "/dev/sda1",
      "status": "attached",
      "volume_id": "vol-secret"
    }
  ],
  "ebs_optimized": false,
  "group_name": null,
  "hypervisor": "xen",
  "id": "i-secret",
  "instance_type": "m1.small"}
]} 

当然真实结果返回 323 条记录...

根据 JSON Lint,JSON 是有效的 JSON

这是我用于 DataTables 的内容:

<script>
  $(document).ready(function() {
  $('#ec2_table').DataTable({
            "serverSide": true,
            "ajax": '/ec2',
            "columns": [
        { "data": "id" },
        { "data": "name" },
        { "data": "architecture" },
        { "data": "instance_type" },
        { "data": "image_id" },
        { "data": "platform" },
        { "data": "state" },
        { "data": "account" },
                    ],
         "lengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]],
            dom: 'T<"clear">lfrtip',
            tableTools: {
        "sSwfPath":    "/static/js/DataTables/extensions/TableTools/swf/copy_csv_xls_pdf.swf"
    }
    });
});

</script>

分页、列排序、搜索都不起作用。

我的 Jinja/HTML 看起来像这样:

<table id="ec2_table" class="order-column display compact" cellspacing="0"    width="98%">
  <thead>
    <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Architecture</th>
          <th>InstType</th>
          <th>Image ID</th>
          <th>Platform</th>
          <th>State</th>
          <th>Account</th>
    </tr>
  </thead>
</table>
4

1 回答 1

2

我一直在查看 dataTables 文档,我认为问题出在您的 JSON 上。

服务器端手册

这是他们给出的例子。count: 不是数据表所期望的列出的参数之一。让我知道是否将 JSON 更改为返回“draw”。“recordsTotal”、“recordsFiltered”和“data”作为参数起作用。因为我自己还在学习 DataTables。

{
"draw": 1,
"recordsTotal": 57,
"recordsFiltered": 57,
"data": [
    [
        "Angelica",
        "Ramos",
        "System Architect",
        "London",
        "9th Oct 09",
        "$2,875"
    ],
    [
        "Ashton",
        "Cox",
        "Technical Author",
        "San Francisco",
        "12th Jan 09",
        "$4,800"
    ],
    ...
]

}

我终于让所有这些工作了!

你将需要这个类来播放 ajax/json 的 api

Imports System.Web.Script.Serialization

Public Class DataTableJsonModel
    Public Property draw As Integer
    Public Property start As Integer
    Public Property length As Integer
    Public Property search As SearchModel
    Public Property order As OrderModel()
    Public Property columns As ColumnModel()

    Class ColumnModel
        Public Property Data As String
        Public Property Name As String
        Public Property searchable As Boolean
        Public Property Orderable As Boolean
        Public Property Search As SearchModel
    End Class

    Class SearchModel
        Public Property value As String
        Public Property regex As Boolean
    End Class

    Class OrderModel
        Public Const asc As String = "asc"
        Public Const desc As String = "desc"

        Public Property column As Integer
        Public Property dir As String
    End Class
End Class

Public Class DataTableReturnModel
    Public Property draw As Integer
    Public Property data As Object
    Public Property recordsTotal As Integer
    Public Property recordsFiltered As Integer
    Public Property errorMessage As String
End Class

Public Class AWS
    Public Property instance_type As String
    Public Property id As String
    Public Property architecture As String
    Public Property account As String
    Public Property name As String

    Public Property block_devices As BlockDeviceModel()
    Public Property ebs_optimized As Boolean
    Public Property group_name As String
    Public Property hypervisor As String


    Class BlockDeviceModel
        Public Property delete_on_terminate As Boolean
        Public Property name As String
        Public Property status As String
        Public Property volume_id As String
    End Class
End Class

我的 Html/javascript 看起来像这样。

@Code
    ViewData("Title") = "AWSDataTables"
End Code


<script>
    $(document).ready(function () {
        var table = $('#ec2_table').DataTable({
            "serverSide": true,
            "ajax": { url: '/Home/ec2',
                type: 'POST',
                dataType: 'json',
                contentType: 'application/json; charset=utf-8',
                data: function (d) {
                    return JSON.stringify(d);
                },
            },
            "columns": [
        { "data": "id" },
        { "data": "name" },
        { "data": "architecture" },
        { "data": "instance_type" },

            ],
            "lengthMenu": [[10, 25, 50, 100, 1000], [10, 25, 50, 100, 1000]],
            dom: 'T<"clear">lfrtip',
            tableTools: {
                "sSwfPath": "/Scripts/media/js/DataTables/extensions/TableTools/swf/copy_csv_xls_pdf.swf"
            }
        });
    });

</script>

<h2>AWSDataTables</h2>

<table id="ec2_table" class="order-column display compact" cellspacing="0" width="98%">
    <thead>
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Architecture</th>
            <th>InstType</th>
        </tr>
    </thead>
</table>

我的服务器端控制器代码是这样的。

Function AWSDataTables() As ActionResult
    Return View()
End Function

<HttpPost()> _
Function ec2(d As DataTableJsonModel) As JsonResult
    Dim dataresults As IEnumerable(Of AWS) = GetAWSTestList()
    Dim filteredData As IEnumerable(Of AWS) = dataresults
    Dim output As New DataTableReturnModel()

    'sorting happens here
    If Not String.IsNullOrEmpty(d.Search.value) Then
        Dim s As String = d.search.value.ToLower
        'this will obviously change based on your class.
        filteredData = dataresults.Where(Function(x) x.id.ToLower.Contains(s) OrElse
                                             x.architecture.ToLower.Contains(s) OrElse
                                             x.name.ToLower.Contains(s))
    End If

    'Ordering happens here
    If Not IsNothing(d.order) AndAlso d.order.Length > 0 Then
        Dim orderM As DataTableJsonModel.OrderModel = d.order(0)
        If Not IsNothing(orderM) Then
            Dim sortDirection As String = orderM.dir
            Dim columnM As DataTableJsonModel.ColumnModel = d.columns.ElementAtOrDefault(orderM.column)
            If Not IsNothing(columnM) AndAlso Not String.IsNullOrEmpty(columnM.Data) AndAlso Not IsNothing(GetType(AWS).GetProperty(columnM.Data)) Then
                If sortDirection = DataTableJsonModel.OrderModel.asc Then
                    filteredData = filteredData.OrderBy(Function(x) GetType(AWS).GetProperty(columnM.Data).GetMethod.Invoke(x, {}))
                Else
                    filteredData = filteredData.OrderByDescending(Function(x) GetType(AWS).GetProperty(columnM.Data).GetMethod.Invoke(x, {}))
                End If
            End If
        End If
    End If

    output.data = filteredData.Skip(d.start).Take(d.length)
    output.recordsFiltered = filteredData.Count
    output.recordsTotal = dataresults.Count

    Return Json(output)
End Function
于 2015-04-09T21:46:25.997 回答