重定向页面后调用json

时间:2018-05-07 17:42:58

标签: datatable

我有'index.html'和'table.html',点击'index.html'中的'click here'我需要重定向到'table.html'并调用相应的json,但这里重定向正在发生并且数据未加载来自'members.json'我添加了所有文件,下面是我的代码。

的index.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="js/script.js"></script>
<style>

</style>
</head>
<body>
<div id="div">
click here
</div>

</body>
</html>

table.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="js/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>
    <script type="text/javascript" charset="utf8" src="js/script.js"></script>
    </div>  
</div>    

的script.js

$( document ).ready(function() {

$('#div').click(function()
{
    $('#example').DataTable( {
language: {
        searchPlaceholder: "Search records"
    },
 "ajax": {
             "type"   : "POST",
            "url": "http://localhost/js/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" }

        ]

}); 
    window.location = 'table.html'
}
);
});

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"
        },
         {
            "name": "mobiles",
            "stargazerscount": 526,
            "forkscount": "major",
            "description": "electronics"
        },
         {
            "name": "mobiles",
            "stargazerscount": 526,
            "forkscount": "major",
            "description": "electronics"
        },
         {
            "name": "mobiles",
            "stargazerscount": 526,
            "forkscount": "major",
            "description": "electronics"
        },
         {
            "name": "mobiles",
            "stargazerscount": 526,
            "forkscount": "major",
            "description": "electronics"
        },
         {
            "name": "mobiles",
            "stargazerscount": 526,
            "forkscount": "major",
            "description": "electronics"
        },
         {
            "name": "mobiles",
            "stargazerscount": 526,
            "forkscount": "major",
            "description": "electronics"
        },
        {
            "name": "shirt",
            "stargazerscount": 526,
            "forkscount": "critical",
            "description": "clothes"
        }


    ]

0 个答案:

没有答案