jquery初学者的数据表答案

【问题标题】：Datatables for beginners in jqueryjquery初学者的数据表
【发布时间】：2017-07-17 12:16:54
【问题描述】：

如果我想创建使用 freegeoip.net 属性的表，如何使用 jquery 数据表？项目的目标是从 freegeoip.net 接收数据，然后将其放入数据表中。这是我的html代码。我也尝试将数据保存到 html 中

<!DOCTYPE html>
<html>
<head>
	<title>idAddress</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>


<input id="ip" type="text" name="textField" placeholder="Enter Ip Address"><br/><br/>
<input id="button" type="submit" value="submit Adress">
<input id="button2" type="button" value="sent" onclick="cheak()">

<p id="p"></p>


<script type="text/javascript">
  var ipAdd;   
  window.cond = false;
  var index = 0;
  function validateIp(ipAdd) {
  var save = /^(?:[0-9]{1,3}\.){3}[0-9]{1,3}$/;
  return save.test(ipAdd);
}

function validate() {
     index++;  //for storing data in array . .
  
    ipAdd = $("#ip").val();

  if (validateIp(ipAdd)) {
    console.log("valid");

    
  } else {
    console.log("invalid");
  }
  
}

$("#button").bind("click", validate);


function cheak(){

 var info = [];
  
 $.ajax({
    url:'https://freegeoip.net/json/'+ipAdd,
    type:"Get",
    dataType:'json',
    success:function(data){
      
        info[index] = JSON.stringify(data);
        document.getElementById("p").innerHTML = info[index];
      

    },
    error: function(XMLHttpRequest, textStatus, errorThrown) {
     console.log("please cheak your IpAdress");
  }


   
    
});
    
     

  
}

</script>


</body>
</html>

【问题讨论】：

Uncaught ReferenceError: validateEmail is not defined 在运行您的 sn-p 时。那应该是一个开始
请查看答案部分的 sn-p。我已对您的代码进行了更改。根据您的要求，只需按给定顺序添加数据表 js 和 jquery。

标签： javascript jquery datatables

【解决方案1】：

试试这个，

     var dataSet =[data];  

     $('#example').DataTable( {
         data: dataSet,
         columns: [
            { "data": "ip" },
            { "data": "country_code" },
            { "data": "country_name" },
            { "data": "region_code" },
            { "data": "region_name" },
            { "data": "city" },
            { "data": "zip_code" },
            { "data": "time_zone" },
            { "data": "latitude" },
            { "data": "longitude" },
            { "data": "metro_code" }
        ],
        searching:false,
        paging:false,
        info:false,
    } );

对于数据表，您需要包含以下脚本。

//code.jquery.com/jquery-1.12.4.js
https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js
https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css

js 也一样 https://jsfiddle.net/tgLybw2e/10/

【讨论】：

dud 它在你剪切的链接上工作，但在我的文件中没有工作，它没有将数据放入表中。 . .
请将您的代码提供到更新的 sn-p 或 jsfiddle 中。所以我可以找到你的问题。
在将你的json数据加载到datatable之前，需要先转换成数组
如果我想在数据表中显示数据，我可以先将其转换为字符串吗？
$.ajax({ url:'freegeoip.net/json/'+ipAdd, type:"Get", dataType:'json', success:function(data){ console.log(data.country_name); var t = $('#example').DataTable(); t.row.add( [ { "name": "data.country_name" } ] ).draw();

【解决方案2】：

    
var ipAdd;   
window.cond = false;
var index = 0;
function validateIp(ipAdd) {
  var save = /^(?:[0-9]{1,3}\.){3}[0-9]{1,3}$/;
  return save.test(ipAdd);
}

function validate() {
  index++;  //for storing data in array . .
  
  ipAdd = $("#ip").val();

  if (validateIp(ipAdd)) {
    console.log("valid");

    
  } else {
    console.log("invalid");
  }
  
}

$("#button").bind("click", validate);

$('#button2').click(function(){
//function cheak(){

 var info = [];  
 $.ajax({
    url:'https://freegeoip.net/json/'+ipAdd,
    type:"Get",
    dataType:'json',
    success:function(data){      
       // Replace this code with datatable binding code as below
       // info[index] = JSON.stringify(data);
       // document.getElementById("p").innerHTML = info[index]; 
       
    // Below code for data table binding   
    $('#example').show();

    // coversion of json data to array object
    var dataSet =[data];    
    
    $('#example').DataTable( {
        data: dataSet,
        columns: [
         	{ "data": "ip" },
            { "data": "country_code" },
            { "data": "country_name" },
            { "data": "region_code" },
            { "data": "region_name" },
            { "data": "city" },
            { "data": "zip_code" },
            { "data": "time_zone" },
            { "data": "latitude" },
            { "data": "longitude" },
            { "data": "metro_code" }
        ],
        searching:false,
        paging:false,
        info:false,
    } );
        
    },
    error: function(XMLHttpRequest, textStatus, errorThrown) {
     console.log("please cheak your IpAdress");
  }  
    
});    
});

<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://cdn.datatables.net/1.10.15/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.15/css/jquery.dataTables.min.css" rel="stylesheet"/>

<body>


<input id="ip" type="text" name="textField" placeholder="Enter Ip Address"><br/><br/>
<input id="button" type="submit" value="submit Adress">
<input id="button2" type="button" value="sent" >

<p id="p"></p>

<table id="example" class="table table-striped table-bordered" cellspacing="0" width="100%" style="display:none;">
        <thead>
            <tr>
                <th>IP</th>
                <th>Country code</th>
                <th>Country name</th>
                <th>Region code</th>
                <th>Region name</th>.
                <th>City</th>
                <th>Zip code</th>
                <th>Time zone</th>
                <th>Latitude</th>
                <th>Longitude</th>
                <th>Metro code</th>
            </tr>
        </thead>
</table>


</body>

【讨论】：