Question

如果我想创建使用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>

Answer 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/

Answer 2

＆＃13;

    
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");
  }  
    
});    
});

＆＃13;

<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>

＆＃13;

jquery

2 个答案: