I have my html page which contains a table. I use dataTable plugin for pagination.1
1https://datatables.net/examples/basic_init/alt_pagination.html
My html as follows.
<head>
<script src="https://code.jquery.com/jquery-1.12.4.js"
type="text/javascript"></script>
<script type="text/javascript"
src=" https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript"
src=" https://cdn.datatables.net/buttons/1.2.4/js/dataTables.buttons.min.js"></script>
<style type="text/css">
table, th,td{
border: 1px solid black;
text-align:center;
}
#clients_data {
margin-bottom:100px;
}
</style>
<meta charset="UTF-8">
<link rel="stylesheet"
href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
<title>Clients</title>
</head>
<body>
<table style="width: 100%" id="clients_data" class="display" >
<caption>Clients</caption>
<thead>
<tr>
<th>Clients</th>
<th>Number of Sites</th>
<th>Reset the Processing</th>
</tr>
</thead>
</table>
<table style="width: 100%" id="machines_data">
<caption>Machines</caption>
<thead>
<tr>
<th>Number</th>
<th>Machine Name</th>
</tr>
</thead>
</table>
<script type="text/javascript">
$(document).ready(function() {
loadCustomers();
loadMachines();
});
function loadCustomers() {
$
.ajax({
type : 'GET',
url : 'http://localhost:8080/cache/getCustomers',
dataType : 'json',
success : function(data) {
var rows = [];
$
.each(
data,
function(id, value) {
rows
.push(' <tbody><tr><td><a href="clientSiteInfo.html?client='
+ id
+ '">'
+ id
+ '</td><td>'
+ value
+ '</td><td><button type="button" onclick="reset(\''
+ id
+ '\')">Reset</td></tr> </tbody>');
});
$('#clients_data').append(rows.join(''));
$('#clients_data').DataTable({
"pagingType" : "full_numbers"
});
}
});
};
.......
this loads data, but pagination is not working. means when I set 10 entries per page, it shows all entries..I have attached the screenshot. AM i missing any other plugin?
But in the mentioned tutorial, it says I need to use "pagingType" : "full_numbers" attribute only..
The pagination works perfectly as expected. The problem is that you wrongly insert a <tbody> section for each row. And since you only can have one <tbody> per DataTable the shown pagination will be based on the very first row in the dataset, thus always showing one page in total.
You could do this instead :
rows
.push(' <tr><td><a href="clientSiteInfo.html?client=' +
id +
'">' +
id +
'</td><td>' +
value +
'</td><td><button type="button" onclick="reset(\'' +
id +
'\')">Reset</td></tr> ');
});
and
$('#clients_data').append('<tbody>'+rows.join('')+'</tbody>');
but you should really consider using columns instead.
Related
I need to load json dump data returning from a python script into my html table, not sure what am i doing wrong as i am relative new to html and doing this for a POC. I'm unable to load the data into a html table. seeking your help.
Python Code
def read_data_from_sql(sqlserverinst,uname,psswd,dbname,url,regime,jurisdiction):
output=[]
conn = pymssql.connect(sqlserverinst, uname, psswd, dbname)
cursor = conn.cursor(as_dict=True)
cursor.execute('SELECT * FROM [reg_content_extracted_url_browsed]')
for row in cursor:
output.append({'url_id': row['url_id'],'url': row['url'],'regime': row['regime'],'jurisdiction': row['jurisdiction']})
# flat_list = [item for sublist in output for item in sublist]
conn.close()
print(json.dumps(output))
return json.dumps(output)
Output format : [{"url_id": 1, "url": "www.google.com", "regime": "FATCA", "jurisdiction": "SG"}]
HTML Table layout
<div class="content-large">Successful Browsed URL(s)
<!-- <style>
table, th, td {
border:1px solid black;
}
</style> -->
<table id="btable" style="width:100%">
<tr style="color: white;">
<th>url id ID</th>
<th>url</th>
<th>Regime</th>
<th>Jurisdiction</th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</div>
Script to populate json data
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js">
</script>
<script type=text/javascript>
$(function() {
$('a#test').on('click', function(e) {
e.preventDefault()
$.get('/datahomepage',
function(data) {
// alert(data);
alert(data.length)
// console.console.log("hheh");
var tr;
for (var i=0;i<data.length;i++){
alert(data[i].url_id)
tr = $('<tr/>');
tr.append("<td>" + data[i].url_id+ "</td>");
tr.append("<td>" + data[i].url+ "</td>");
tr.append("<td>" + data[i].regime+ "</td>");
$('btable').append(tr);
}
});
// return false;
});
});
</script>
An obvious error is:
$('btable').append(tr);
which should be
$('#btable').append(tr);
I am currently trying to learn RESTful API's and implementing them into use case and one of the things I am trying to do is to load the url with the json payload from one server into a separate web server to display on a table the data. I am not too familiar with this so I am trying to find out the best way to do this.
I am using this API to post to a page which is domain.com/todos
https://github.com/corylanou/tns-restful-json-api
And then I am attempting to use this to print it out to a table
https://github.com/sam-suresh/JSON-URL-to-HTML-Table
but it doesn't look like it is working. I put it all into a single index file and it shows it hitting my api on the console but I am not showing any output in the table.
<html>
<table id="personDataTable">
<tr>
<th>id</th>
<th>name</th>
<th>due</th>
</tr>
</table>
<style>
table {
border: 2px solid #666;
width: 100%;
}
th {
background: #f8f8f8;
font-weight: bold;
padding: 2px;
}
</style>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$.ajax({
url: 'http://my-website-domain.com/todos',
type: "get",
dataType: "json",
success: function(data) {
drawTable(data);
}
});
function drawTable(data) {
for (var i = 0; i < data.length; i++) {
drawRow(data[i]);
}
}
function drawRow(rowData) {
var row = $("<tr />")
$("#personDataTable").append(row);
row.append($("<td>" + rowData.id + "</td>"));
row.append($("<td>" + rowData.name + "</td>"));
row.append($("<td>" + rowData.due + "</td>"));
}
</script>
</html>
And this is what it shows on the /todos page
[{"id":1,"name":"Write presentation","completed":false,"due":"0001-01-01T00:00:00Z"},{"id":2,"name":"Host meetup","completed":false,"due":"0001-01-01T00:00:00Z"},{"id":3,"name":"New Todo","completed":false,"due":"0001-01-01T00:00:00Z"}
The success function isn't passed the raw data. It's passed an object with a lot of different properties. Data is just one of them. Try this:
$.ajax({
url: 'http://my-website-domain.com/todos',
type: "get",
dataType: "json",
success: function(results) {
drawTable(results.data);
}
});
It's also possible I'm remembering this wrong. I'd put a debugger in your success function and see what it's actually getting passed, then go from there.
The problem is that the JSON returned by the page /todos is not a valid JSON Array. Missing the
]
at the end.
So it would be:
[{"id":1,"name":"Write presentation","completed":false,"due":"0001-01-01T00:00:00Z"},{"id":2,"name":"Host meetup","completed":false,"due":"0001-01-01T00:00:00Z"},{"id":3,"name":"New Todo","completed":false,"due":"0001-01-01T00:00:00Z"}]
Here is a page to validate JSON data:
Json Parser Online
Thank you all for all of the help. The issue was that the CORS policy wasn't enabled so the request was getting blocked. The fix was to simply enable CORS which was done in the handlers.go for this particular API by adding
w.Header().Set("Access-Control-Allow-Origin", "*")
I think you check API get json data, I copy your code and hash code json data and see it work.
//$.ajax({
// url: 'http://my-website-domain.com/todos',
// type: "get",
// dataType: "json",
//
// success: function(data) {
// drawTable(data);
// }
//});
var data = [{"id":1,"name":"Write presentation","completed":false,"due":"0001-01-01T00:00:00Z"},{"id":2,"name":"Host meetup","completed":false,"due":"0001-01-01T00:00:00Z"},{"id":3,"name":"New Todo","completed":false,"due":"0001-01-01T00:00:00Z"}];
drawTable(data);
function drawTable(data) {
for (var i = 0; i < data.length; i++) {
drawRow(data[i]);
}
}
function drawRow(rowData) {
var row = $("<tr />")
$("#personDataTable").append(row);
row.append($("<td>" + rowData.id + "</td>"));
row.append($("<td>" + rowData.name + "</td>"));
row.append($("<td>" + rowData.due + "</td>"));
}
<html>
<table id="personDataTable">
<tr>
<th>id</th>
<th>name</th>
<th>due</th>
</tr>
</table>
<style>
table {
border: 2px solid #666;
width: 100%;
}
th {
background: #f8f8f8;
font-weight: bold;
padding: 2px;
}
</style>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</html>
To make table of json data, you can use jQuery DataTables.
Here is the sample code:
$(document).ready(function() {
$('#example').DataTable( {
"ajax": 'http://www.json-generator.com/api/json/get/cjnIrxkIUi?indent=2'
} );
} );
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css">
<table id="example" class="display" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Extn.</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
</table>
i'm trying to create a dynamic table that gets JSON via an an Ajax call, create a table out of that data. I've this part done but my main issue is, one of the table columns will be an editable field that should a different column that was created via the ajax.
My main real issue is how to tell JQuery that I want the column next door to it to update.
<html>
<head>
<script src="jquery-3.2.1.min.js"></script>
<script src="jquery.dataTables.min.js"></script>
<script src="jquery.tabletojson.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.dataTables.min.css"/>
</head>
<body>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
</tr>
<tbody></tbody>
</thead>
<script>
$(document).ready(function() {
$.get("objects.txt", function(response){
var obj = jQuery.parseJSON(response);
$.each(obj.data, function(key,value){
$("#example tbody").append("<tr>");
$("#example tbody").append("<td contenteditable=true>"+ value.name +"</td>");
$("#example tbody").append("<td>" + value.position +"</td>")
$("#example tbody").append("<td>" + value.Office +"</td>")
$("#example tbody").append("</tr>");
});
//uses a table to json library
var json = $("#example").tableToJSON();
});
});
</script>
</body>
For simplicities sake, When the field "name" is editted, I want the office field to be editted that is on that row. Not entirely sure where to go from here.
Thanks for the help!
Try combining the entire <tr> into one call to append.
var obj = {
data: [
{
name: "person 1",
position: "President",
Office: "Corner"
},
{
name: "person 2",
position: "Developer",
Office: "Penthouse"
},
]
};
$(document).ready(function() {
$.each(obj.data, function(key,value){
$("#example tbody").append("<tr><td contenteditable=true>"+ value.name +"</td><td>" + value.position +"</td><td>" + value.Office +"</td></tr>");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
</tr>
<tbody></tbody>
</thead>
</table>
I am trying to make an admin panel and I have to edit user's details (parse.com) from this panel.
After many searches on google I succeded to display the user's firstname and lastname. I made another function with query.first() but I can edit only the first user, what should I do to can edit second user or third ?
Here is my code:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/parse-1.5.0.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript" src="js/main.js"></script>
</head>
<body ng-app="demo">
<div class="container" ng-controller="adminPannel">
<table class="table table-striped">
<thead>
<tr>
<th>Username</th>
<th>First Name</th>
<th>Last Name</th>
</tr>
</thead>
<tbody><tr ng-repeat="user in users">
<td><button class="btn" ng-click="editUser()"></button><input type="text" id="frstName" ng-value="Firstname" ng-model="firstNameCh"/><input type="text" id="lstName" ng-value="Lastname" ng-model="lastNameCh"/></td>
<td>{{ user.firstname }}</td>
<td>{{ user.lastname }}</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
and js:
var app=angular.module('demo',[]);
app.controller('adminPannel',['$scope',function($scope) {
$scope.users=[];
Parse.initialize("WnaPPAytzCE8AR7NNGENpVGMGQ6pQ9wH2LKRQ6wE", "2qfXZunNrQPnCgNuusPpbGCDmbRBzo7CG4X0edDF");
$scope.use=Parse.User.current();
var noname2=Parse.Object.extend("noname2");
var query=new Parse.Query(noname2);
//query.equalTo("uname",$scope.use.get('username'));
query.find({
success:function(results) {
alert("success");
alert(results.length);
for(var i=0;i<results.length;i++)
{
var object= results[i];
$scope.users.push({'firstname':object.get('firstname') , 'lastname':object.get('lastname') ,'age':object.get('age')});
}
$scope.$apply();
},
error:function(error) {
alert("error:"+ error.code +" "+error.message);
}
});
$scope.editUser = function(){
var query = new Parse.Query(noname2);
query.first({
success:function(noname2){
noname2.save(null,{
success:function(nm2){
nm2.set('firstname', $('#frstName').val());
nm2.set('lastname', $('#lstName').val());
nm2.save();
location.reload();
}
});
},
error:function(error){
alert('error' + error.code + ' ' + error.message);
}
});
}
}]);
I don't know what should I change in my editUser function.
Try here: https://parse.com/docs/js/api/symbols/Parse.Query.html
You can use query.find instead of query.first and then on success you'll get a results list of objects.
How do I apply styling to a table after parsing XML data into the table?
In the code below I Created the first three rows of a table using html, then the additional rows were created by parsing XML. however the Zebra stripe styling was not applied to the table after the jquery call. I've tried my best to find the problem with my code but I'm stumped.
Here's a code sample of my html:
<head>
<title>Football Players</title>
<style>
table{
border-collapse: collapse;
border: solid 1px #dddddd;
width: 500px;
}
th{
text-align: left;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<th>Name</th>
<th>Club</th>
<th>Number</th>
<th>Country</th>
</tr>
<tr>
<td>Lionel Messi</td>
<td>Barcelona</td>
<td>10</td>
<td>Argentina</td>
</tr>
<tr>
<td>Juan Mata</td>
<td>Manchester United</td>
<td>8</td>
<td>Spain</td>
</tr>
</tbody>
</table>
</body>
And the following is a snippet of my JQuery:
$(document).ready(function () {
$.ajax({
type: "GET",
url: "football_player.xml",
dataType: "xml",
success: processXML
});
function processXML(xml) {
$(xml).find("football_player").each(function () {
$("table tbody").append("<tr class = 'myClass'>");
$("table tbody").append("<td>" + $(this).find("name").text() + "</td>");
$("table tbody").append("<td>" + $(this).find("club").text() + "</td>");
$("table tbody").append("<td>" + $(this).find("number").text() + "</td>");
$("table tbody").append("<td>" + $(this).find("country").text() + "</td>");
$("table tbody").append("</tr>");
});//close processXML
$("table tbody tr:nth-child(odd)").css("background-color", "#dddddd");
}
});//close document.ready()
And lastly the XML file:
<football_players>
<football_player>
<name>Cristiano Ronaldo</name>
<club>Real Madrid</club>
<number>7</number>
<country>Portugal </country>
</football_player>
<football_player>
<name>Fernando Torres </name>
<club>Chelsea </club>
<number>9</number>
<country>Spain</country>
</football_player>
<football_player>
<name>Iker Casillas</name>
<club>Real Madrid </club>
<number>1</number>
<country>Spain</country>
</football_player>
<football_player>
<name>David Beckham</name>
<club>Los Angeles Galaxy</club>
<number>23</number>
<country>England</country>
</football_player>
</football_players>
Checking the console is always a good idea,The problem in your code probably is in the function processXML(xml).This is beacause your <tr> were closed before adding <td>.Hence it was not applying the color.
Change it to..
function processXML(xml) {
$(xml).find("football_player").each(function () {
$("table tbody").append("<tr class = 'myClass'>"+"<td>" +
$(this).find("name").text() + "</td>"+"<td>" + $(this).find("club").text() + "</td>"+"<td>" + $(this).find("number").text() + "</td>"+"<td>" + $(this).find("country").text() + "</td>"+"</tr>");
});//close processXML
$("table tbody tr:nth-child(odd)").css("background-color", "#dddddd");
}
Thanks to Varun I came up with the following which worked:
function processXML(xml) {
$(xml).find("football_player").each(function () {
$("table tbody").append("<tr class = 'myClass'><td>" + $(this).find("name").text() + "</td><td>" + $(this).find("club").text() + "</td><td>" + $(this).find("number").text() + "</td><td>" + $(this).find("country").text() + "</td></tr>");
});
$("table tbody tr:nth-child(odd)").css("background-color", "#dddddd");
}