Question

我有一个由来自外部json的插件数据表创建的表，我只需要在页面加载时得到第一个TD的第一个TD的文本，它可以正常使用静态数据但是使用外部json不是working.I已经尝试过，但它不起作用。任何人都可以帮助我。下面是我的代码。谢谢。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="script.js"></script>
<style>

</style>
</head>
<body>
<div class="col-md-12">
</div>
<div id="div">
<div>
 <table id="example">
        <thead>
            <tr>            
                <th>name</th>
                <th>stargazerscount</th>
                <th>forkscount</th>
                <th>description</th>               
            </tr>
        </thead>
        <tbody>          
        </tbody>
    </table>

    </div>  
</div>  
</body>
</html>

的Javascript

$( document ).ready(function() {

    $('#example').DataTable( {
language: {
        searchPlaceholder: "Search records"
    },
 "ajax": {
             "type"   : "POST",
            "url": "http://localhost/members.json",
             "dataSrc": function (json) {
      var return_data = new Array();
      for(var i=0;i< json.length; i++){

        return_data.push({

         'name': json[i].name,
          'stargazerscount'  : '<span onclick="f()">'+json[i].stargazerscount+'</span>',
           'forkscount'  : json[i].forkscount,
          'description' : json[i].description
        })

      }

      return return_data;
             }
    },

        "columns": [
            { "data": "name" },
            { "data": "stargazerscount" },
            { "data": "forkscount" },
            { "data": "description" }

        ]

}); 
  var x = $('#example tbody tr:first').find('td:first').text();
alert(x);    
}
);

members.json

[{
            "name": "mango",
            "stargazerscount": 526,
            "forkscount": "critical",
            "description": "fruits"
        },
        {
            "name": "brinjal",
            "stargazerscount": 526,
            "forkscount": "critical",
            "description": "vagetables"
        },
        {
            "name": "grapes",
            "stargazerscount": 526,
            "forkscount": "major",
            "description": "fruits"
        },
        {
            "name": "soap",
            "stargazerscount": 526,
            "forkscount": "major",
            "description": "groceries"
        },
        {
            "name": "dates",
            "stargazerscount": 526,
            "forkscount": "critical",
            "description": "dryfruits"
        },
        {
            "name": "mobiles",
            "stargazerscount": 526,
            "forkscount": "major",
            "description": "electronics"
        },
        {
            "name": "shirt",
            "stargazerscount": 526,
            "forkscount": "critical",
            "description": "clothes"
        },
        {
            "name": "dates",
            "stargazerscount": 526,
            "forkscount": "critical",
            "description": "dryfruits"
        },
        {
            "name": "mobiles",
            "stargazerscount": 526,
            "forkscount": "major",
            "description": "electronics"
        },
        {
            "name": "shirt",
            "stargazerscount": 526,
            "forkscount": "critical",
            "description": "clothes"
        },
        {
            "name": "shirt",
            "stargazerscount": 526,
            "forkscount": "critical",
            "description": "clothes"
        },
        {
            "name": "dates",
            "stargazerscount": 526,
            "forkscount": "critical",
            "description": "dryfruits"
        },
        {
            "name": "mobiles",
            "stargazerscount": 526,
            "forkscount": "major",
            "description": "electronics"
        },
        {
            "name": "shirt",
            "stargazerscount": 526,
            "forkscount": "critical",
            "description": "clothes"
        },
        {
            "name": "dates",
            "stargazerscount": 526,
            "forkscount": "critical",
            "description": "dryfruits"
        },
        {
            "name": "mobiles",
            "stargazerscount": 526,
            "forkscount": "major",
            "description": "electronics"
        },
         {
            "name": "mobiles",
            "stargazerscount": 526,
            "forkscount": "major",
            "description": "electronics"
        }


    ]

Answer 1

你应该能够通过vanilla选择td的第一个实例（基本上是第一个tr的第一个td）：

document.querySelector('td').innerHTML;

唯一的问题是，当您尝试选择该元素时，DOM尚未更新。

为避免这种情况，请将其放入initComplete：

$('#example').DataTable( {
    language: {
        searchPlaceholder: "Search records"
    },
    "ajax": {
        "type"   : "POST",
        "url": "http://localhost/members.json",
        "dataSrc": function (json) {
            var return_data = new Array();
            for(var i=0;i< json.length; i++){

                return_data.push({
                    $('#example').DataTable( {
                    language: {
                        searchPlaceholder: "Search records"
                    },
                    "ajax": {
                        "type"   : "POST",
                        "url": "http://localhost/members.json",
                        "dataSrc": function (json) {
                            var return_data = new Array();
                            for(var i=0;i< json.length; i++){

                                return_data.push({

                                    'name': json[i].name,
                                    'stargazerscount'  : '<span onclick="f()">'+json[i].stargazerscount+'</span>',
                                    'forkscount'  : json[i].forkscount,
                                    'description' : json[i].description
                                })

                            }

                            return return_data;
                        }
                    },

                    "columns": [
                        { "data": "name" },
                        { "data": "stargazerscount" },
                        { "data": "forkscount" },
                        { "data": "description" }

                    ]

                });
                'name': json[i].name,
                    'stargazerscount'  : '<span onclick="f()">'+json[i].stargazerscount+'</span>',
                    'forkscount'  : json[i].forkscount,
                    'description' : json[i].description
                })

            }

            return return_data;
        }
    },

    "columns": [
        { "data": "name" },
        { "data": "stargazerscount" },
        { "data": "forkscount" },
        { "data": "description" }

    ],

    "initComplete": function(settings, json) {
        console.log(document.querySelector('td').innerHTML);
    }
});

这将等待它初始化然后执行脚本。可以找到更多信息here。

Answer 2

您必须为数据表声明分配一个变量。与var dtable中的var dtable = $('#example').DataTable({一样：

initComplete

在声明中添加"initComplete": function(settings, json) { var column = dtable .row(0).data(); alert(column[0]); },属性，以便成功执行所需的代码，因为您的数据表已经完全加载。

<script>$(document).ready(function() {
  var dtable = $('#example').DataTable({
    language: {
      searchPlaceholder: "Search records"
    },
    "initComplete": function(settings, json) {
    var column = dtable.row(0).data();
      alert(column[0]);
    },
    "ajax": {
      "type": "POST",
      "url": "http://localhost/members.json",
      "dataSrc": function(json) {
        var return_data = new Array();
        for (var i = 0; i < json.length; i++) {

          return_data.push({

            'name': json[i].name,
            'stargazerscount': '<span onclick="f()">' + json[i].stargazerscount + '</span>',
            'forkscount': json[i].forkscount,
            'description': json[i].description
          })

        }

        return return_data;
      }
    },

    "columns": [{
        "data": "name"
      },
      {
        "data": "stargazerscount"
      },
      {
        "data": "forkscount"
      },
      {
        "data": "description"
      }

    ]

  });
});

</script>

更新代码：

{{1}}

如何在加载数据表中获取第一行第一行的文本

HTML

的Javascript

members.json

2 个答案: