试图用json格式的数据填充数据表,但没有可用数据错误

时间:2019-02-01 09:20:14

标签: javascript html ajax

这是我要执行的html文件。但是“无可用数据错误”即将出现

 <!DOCTYPE html>
    <html>
<head>
   <link rel="stylesheet" type="text/css"  href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css">
   <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.2.min.js"></script>
   <script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
   <script>
     $(document).ready(function() {
        $('#tt').DataTable({
            "ajax" : {
            "url" : "D:\bhama\New folder\json_colors.txt",
            "dataSrc" : "cc"
            },
            "columns" : [ 
                         { "data" : "color"}, 
                         { "data" : "category"}, 
                         { "data" : "type" },
                         { "data" : "code"}
                        ]
         });
       });
     </script>
     </head>
     <body>

      <p>The content is written in JSON format, and can easily be converted into a JavaScript object.</p>


      <table id="tt"  cellspacing="0" width="100%">
       <thead>

             <th>color</th>
             <th>category</th>
             <th>type</th>
             <th>code</th>

          </thead>
      </table>


    </body>
    </html>

即使将URL单独更改为文件名,它也会显示“无可用数据”      json_colors.txt

{
"cc":[
   {
      "color": "black",
      "category": "hue",
      "type": "primary",
      "code":  "#000"

    },
{
  "color": "white",
  "category": "hue",
"type": "primary",
  "code":  "#FFF"

},
{
  "color": "green",
  "category": "hue",
  "type": "secondary",
  "code": "#0F0"
  }
]
}

在这里,我试图将json数据文件推入数据表,但是在执行代码时,我遇到了一些“无可用数据”的错误。此后,我还尝试了json_color.json文件而不是.txt文件,但它显示了同样的错误。 因此,请帮助我解决此错误。  预先感谢。

1 个答案:

答案 0 :(得分:0)

我可以为您提供有关如何使用Ajax将任何信息或数据附加到Datatable中的基本演示。希望您能从中得到启发。这是我的HTML代码。

# Initialize style
s = ttk.Style()
# Create style used by default for all Frames
s.configure('TFrame', background='green')

# Create style for the first frame
s.configure('Frame1.TFrame', background='red')
# Use created style in this frame
tab1 = ttk.Frame(mainframe, style='Frame1.TFrame')
mainframe.add(tab1, text="Tab1")

# Create separate style for the second frame
s.configure('Frame2.TFrame', background='blue')
# Use created style in this frame
tab2 = ttk.Frame(mainframe, style='Frame2.TFrame')
mainframe.add(tab2, text="Tab2")

因此在我的HTML中,我将7列分配到了数据表中,而我的正文为空,因为我们需要动态地将数据添加到列中。

这是我的Javascript代码。

<div class="container">
        <table id="example" class="table table-striped table-bordered" style="width:100%">
            <thead>
                <tr>
                    <th>img</th>
                    <th>Name</th>
                    <th>Lastname</th>
                    <th>Email id</th>
                    <th>Password</th>
                    <th>Birthdate</th>
                    <th>Zipcode</th>
                    <th>Phone Number</th>
                  </tr>
            </thead>
            <tbody>

           </tbody>
        </table>
    </div>

因此要在列中附加任何内容,我们需要使用.append命令,该命令会将数据附加到您的列中。希望它对您有用。谢谢。