object.txt

Question

我正在尝试将JSON数据加载到Jquery DataTable in MVC 4。以下是Controller中的ActionResult。

public ActionResult TimeZone()
    {
        BitlyDataStore json = new BitlyDataStore();
        var result = json.GetTimeZoneWiseScoreCard();
        return Json(result, JsonRequestBehavior.AllowGet);
    }

相应的输出是JSON数据。数据为：

{"Scores":[{"Subject":"America/Los_Angeles","Count":421},
{"Subject":"","Count":636},{"Subject":"America/Phoenix","Count":40},
{"Subject":"America/Chicago","Count":686},
{"Subject":"America/Indianapolis","Count":50},
{"Subject":"Australia/NSW","Count":32},
{"Subject":"America/New_York","Count":903},
{"Subject":"America/Denver","Count":89},
{"Subject":"America/Port_of_Spain","Count":1},{"Subject":null,"Count":120}]}

我们如何在相应的视图中将它加载到JQueryTable中？我已经阅读了文档，但无法理解如何传递它。我尝试在文档中传递Ajax代码。代码是：

$('#example').dataTable({
            "ajax": {

                "url": "/Bitly/TimeZone/",
                "dataType": "json"
            }

Answer 1

我认为您的响应是错误的，数据表获取数据列表，您的响应是对象，因为您需要列出yor数据列表，请参阅下面的示例。

＆＃13;

var datasource={"Scores":[{"Subject":"America/Los_Angeles","Count":421},{"Subject":"","Count":636},{"Subject":"America/Phoenix","Count":40},{"Subject":"America/Chicago","Count":686},{"Subject":"America/Indianapolis","Count":50},{"Subject":"Australia/NSW","Count":32},{"Subject":"America/New_York","Count":903},{"Subject":"America/Denver","Count":89},{"Subject":"America/Port_of_Spain","Count":1},{"Subject":null,"Count":120}]};

var dataitems=[];
$.each(datasource.Scores,function(i,item){
  var data=[];
  data.push(item.Subject);
  data.push(item.Count);
  dataitems.push(data);
});

$(document).ready(function() {
    $('#example').DataTable( {
        data: dataitems,
        columns: [
            { title: "Subject" },
            { title: "Count" }            
        ]
    });
});

＆＃13;

<link href="http://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
<table id="example"></table>

＆＃13;

Answer 2

我试过这样，它为我工作，无论你的反应是什么，你得到的对象更好应该只是数据而不是下面的得分...（我没有你的代码，这就是我尝试这样的原因..

object.txt

{
"data":[
    {"Subject":"America/Los_Angeles","Count":421},
    {"Subject":"","Count":636},
    {"Subject":"America/Phoenix","Count":40},
    {"Subject":"America/Chicago","Count":686},
    {"Subject":"America/Indianapolis","Count":50},
    {"Subject":"Australia/NSW","Count":32},
    {"Subject":"America/New_York","Count":903},
    {"Subject":"America/Denver","Count":89},
    {"Subject":"America/Port_of_Spain","Count":1},           
    {"Subject":null,"Count":120}
   ]
}

html是......

<!DOCTYPE html>

<html>
<head>
    <title>Routing with Route Provider First Application</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.10/css/jquery.dataTables.min.css">

    <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"></script>
</head>
<body>
    <table id="example" class="display" cellspacing="0" width="100%">
        <thead>
            <tr>
                <th>Subject</th>
                <th>Count</th>                    
            </tr>
        </thead>
        <tfoot>
            <tr>
                <th>Subject</th>
                <th>Count</th>                     
            </tr>
        </tfoot>
    </table>
    <script>
        $(document).ready(function () {
            $('#example').DataTable({
//               "ajax": "obj.txt",
                "ajax": {
                    "url": "obj.txt",
                    "dataType": "json",
                    //"type": "GET"
                },
                "columns": [
                    {"data": "Subject"},
                    {"data": "Count"}
                ]
            });
        });
    </script>
  </body>
</html>

Answer 3

我尝试了很多方法和上面提到的方法。但这些并不是我想要的答案。我的导师找到了解决方案，我将在下面分享。

$(document).ready(function () {
        $('#example').dataTable({
            "ajax": {
                "url": "/Bitly/TimeZone",
                "dataSrc": "Scores",

            },

            "columns": [
               { "data": "Subject" },
               { "data": "Count" }
            ]
        });
    });

dataSrc和data是datatable的关键字。谢谢大家的帮助！

将JSON数据加载到JQuery DataTable中

3 个答案:

object.txt