When displaying my list in a html table I only want to bring in the items in that list if it equals something. For example, if client is equal to x then bring in the contact details associated with it.
The code I have currently is below and just brings in specific columns such as client etc.
Any help would be appreciated.
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/css/dataTables.jqueryui.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://www.datatables.net/release-datatables/extensions/ColReorder/js/dataTables.colReorder.js"></script>
<!--SPServices Javascript-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.02/jquery.SPServices-2014.02.min.js"></script>
<!--SpServices JavaScript get items from list 'files'-->
<script language="javascript" type="text/javascript">
$(document).ready(function() {
var myQuery =
"<Query>" +
"<OrderBy>" +
"<FieldRef Name='Client' />" +
"</OrderBy>" +
"</Query>";
$().SPServices({
webURL: "https://ext.kier.co.uk/teams/Utilities/",
operation: "GetListItems",
async: false,
listName: "UtilitiesContracts",
CAMLQuery: myQuery,
CAMLRowLimit: 100,
completefunc: function(xData, Status) {
var liHtml = "<tbody>";
$(xData.responseXML).SPFilterNode("z:row").each(function() {
liHtml = liHtml + " <tr><td>" + $(this).attr("ows_Client") + "</td><td>" + $(this).attr("ows_OperationalContacts")+ "</td><td>"$(this).attr("ows_CommercialContacts")"</td></tr>";
});
liHtml += "</tbody>";
$("#ContractsTable").append(liHtml);
}
});
$('#ContractsTable').DataTable({
"dom": 'Rlfrtip'
});
});
</script>
<table id="ContractsTable" class="display" cellspacing="0" width="50%">
<thead>
<tr>
<th>Client</th>
<th>Operational Contacts</th>
<th>Commercial Contacts</th>
</tr>
</thead>
</table>
News
<br>
Operational
You need to use CAML query with the Where condition. In the Where condition, you can pass the name of the client. Check the below sample code:
var myQuery = "<Query><Where><Eq><FieldRef Name='Client'/><Value Type='Text'>" + X + "</Value>
</Eq></Where><OrderBy><FieldRef Name='Client' /></OrderBy></Query>"
Now, you can use this myQuery in your SPServices code and it will filter out the results.
I modify the code as below:
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.12/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/datatables/1.10.12/css/dataTables.jqueryui.min.css">
<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://cdn.datatables.net/1.10.12/js/jquery.dataTables.min.js"></script>
<script src="https://www.datatables.net/release-datatables/extensions/ColReorder/js/dataTables.colReorder.js"></script>
<!--SPServices Javascript-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.SPServices/2014.02/jquery.SPServices-2014.02.min.js"></script>
<!--SpServices JavaScript get items from list 'files'-->
<script language="javascript" type="text/javascript">
$(document).ready(function() {
var myQuery =
"<Query>" +
"<Where><Eq><FieldRef Name='Client'/><Value Type='Text'>X</Value></Eq></Where>"+
"<OrderBy>" +
"<FieldRef Name='Client' />" +
"</OrderBy>" +
"</Query>";
$().SPServices({
webURL: "https://ext.kier.co.uk/teams/Utilities/",
operation: "GetListItems",
async: false,
listName: "UtilitiesContracts",
CAMLQuery: myQuery,
CAMLRowLimit: 100,
completefunc: function(xData, Status) {
var liHtml = "<tbody>";
$(xData.responseXML).SPFilterNode("z:row").each(function() {
liHtml = liHtml + " <tr><td>" + $(this).attr("ows_Client") + "</td><td>" + $(this).attr("ows_OperationalContacts")+ "</td><td>"$(this).attr("ows_CommercialContacts")"</td></tr>";
});
liHtml += "</tbody>";
$("#ContractsTable").append(liHtml);
}
});
$('#ContractsTable').DataTable({
"dom": 'Rlfrtip'
});
});
</script>
<table id="ContractsTable" class="display" cellspacing="0" width="50%">
<thead>
<tr>
<th>Client</th>
<th>Operational Contacts</th>
<th>Commercial Contacts</th>
</tr>
</thead>
</table>
News
<br>
Operational
Related
I have created a bootstrap-table in table.php file and define a table heading with data-formatter like this
<th data-field='edit' data-formatter="editFormatter">Edit</th>
and i have create function for this,
function editFormatter(value, row)
{
return `<a href="<?= URL::to('xyz/label'); ?>" ><i class="fa fa-pencil sg-edit-btn" ></i></a>`
}
but when I inspect on table.php page it is showing anchor like this,
<a href="<?= URL::to('xyz/label'); ?>
why php code doesn't convert like this,
<a href="https://localhost/app/public/xyz/label" class="btn sg-primary-btn">
is there any way to do this? thanks in advance
var data = [{
"url": "https://www.stackoverflow.com",
"nice_name": "Stackoverflow"
}, {
"url": "https://www.facebook.com",
"nice_name": "Facebook"
}];
function linkFormatter(value, row) {
return "<a href='" + row.url + "'>" + row.nice_name + "</a>";
}
$(function() {
$('#table').bootstrapTable({
data: data
});
});
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/bootstrap-table#1.14.2/dist/bootstrap-table.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/bootstrap-table#1.14.2/dist/bootstrap-table.min.css">
<table data-toggle="#table" id="table">
<thead>
<tr>
<th data-field="url" data-formatter="linkFormatter" data-sortable="true">Link</th>
</tr>
</thead>
</table>
The data search works fine for normal table data. When Iam filling the table body with Ajax call the search is not working.
I am using AJAX call to fill the table body. My table search works well If there is some Dummy Data without Ajax call. After the Ajax call the search is not working...
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables_themeroller.css">
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/jquery.dataTables.min.js"></script>
</head>
<body>
<table id="myTable" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Salary</th>
</tr>
</thead>
<tbody id="userdetails1">
</tbody>
</table>
</body>
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/css/jquery.dataTables_themeroller.css">
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.1.min.js"></script>
<script type="text/javascript" charset="utf8" src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.0/jquery.dataTables.min.js"></script>
<script src="js/admin-dashboard.js"></script>
<script>
$(document).ready(function() {
$('#myTable').DataTable();
});
$('#myTable input').on('keyup', function() {
table.search(this.value).draw();
});
</script>
</body>
</html>
The issue is not with your ajax calls
rather it's with your data-table initializing
with reference to your codepen link:
https://codepen.io/jithendraathipatla/pen/JQMxvg?editors=1111
do this: in document.ready
$(document).ready(function() {
$('#myTable').DataTable();
function filterGlobal () {
$('#myTable').DataTable().search(
$('#global_filter').val(),
).draw();
}
function filterColumn ( i ) {
$('#myTable').DataTable().column( i ).search(
$('#col'+i+'_filter').val(),
).draw();
}
$('input.global_filter').on( 'keyup click', function () {
filterGlobal();
} );
$('input.column_filter').on( 'keyup click', function () {
filterColumn( $(this).parents('tr').attr('data-column') );
} );
} );
and in your js file replace your code with:
var waitlistTable=[];
waitlistdatashow();
function waitlistdatashow(){
console.log("hi");
var data = {"hosted_event_id": "testkonfhub-php-ban963c6ec2",
"user_id" : "1548232247"
};
// document.getElementById("userdetails").innerHTML = "<i class=\"fa fa-refresh fa-spin\" style=\"font-size:48px\"></i> ";
$.ajax({
url: "https://mr6akjmp7f.execute-api.us-east-2.amazonaws.com/default/konfhub_event_display_wailist_details",
type: "POST",
data: JSON.stringify(data),
dataType: "json",
async:false,
success: function (data) {
console.log(data);
waitlistTable=data.participant_details;
console.log(waitlistTable);
//document.getElementById("event_name1").innerHTML = waitlistTable.event_name;
for(var i=0; i < waitlistTable.length; i++){
$("#userdetails1").append(
//"<th>Date & Time of Purchase</th>" +
"<tr>"+
"<td style='cursor: default'>" + waitlistTable[i].name + "</td>" +
"<td style='cursor: default'>" +
" <span class=\"block-email\" >" + waitlistTable[i].email_id.slice(0, 25) + "</span>" +
"</td>" +
"<td class=\"desc\">" + waitlistTable[i].phone_number + "</td>" +
"<td class=\"desc\">" + waitlistTable[i].organisation + "</td>" +
"<td class=\"desc\" id=\"waitlisttext\" style=\"color:orange\">" + waitlistTable[i].ticket_status + "</td>" +
// "<td><textarea id=" + "lead_text".concat(no_of_participant) + " rows=\"1\" cols=\"50\" type=\"text\" style=\"width:100%;border: 1px solid lightslategrey;padding: 4px;border-radius: 4px;\" placeholder=\"write comments here..\">" + returnLeadText(king[no_of_participant].misc) + "</textarea></td>" +
// "<td><span id=" + "approve".concat(no_of_participant) + " class='fas fa-check-circle click-check' onclick=\"approveWaitlist(" + no_of_participant + ")\" style=\"cursor:pointer;font-size: 25px;color:green\" data-toggle=\"tooltip\" title=\"Approve\">  </span>"+
//"<div id=" + "delete-waitlist".concat(no_of_participant) + " class='far fa-times-circle click-check1' onclick=\"deleteWaitlistRecord(" + no_of_participant + ")\" style=\"cursor:pointer; font-size: 25px;color:red\" data-toggle=\"tooltip\" title=\"Reject\"></div></td>" +
"<\tr>"+
"<hr>"
);
// if(waitlistTable[i].status=="ACTIVE"){
// document.getElementById("refundbtn".concat(i)).style.display = "block";
// document.getElementById("cancelbtn".concat(i)).style.display = "block";
}
$('#myTable').DataTable();
}
});
}
I'm a total beginner, so I've been kinda of banging my head against a wall trying to figure this out.
Basically, the code below displays json data from a url and displays it in a table. At the moment all 12 keys in the object are being displayed in the table.
What I would like to know is how would I go about displaying just some of the keys in the table. For example, how would I build a table that just has short, long, price and volume being displayed.
I hope this makes sense, thanks in advance
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Using Coincap.io API</title>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css'>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container-fluid fill-page">
<div class="row justify-content-center align-items-center">
<div class="col-10">
<div class="waitingDiv text-center">loading...</div>
<table class="table table-striped table-bordered table-hover table-sm">
<thead class="thead-dark"></thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
</div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js'></script>
<script src="js/index.js"></script>
</body>
</html>
<script>
$(document).ready(function() {
$.ajax({
url: "https://coincap.io/front",
type: "GET",
dataType: "json"
}).done(function(data, textStatus, jqxhr) {
//only look at first 25 results...
data = data.slice(0, 10);
$.each(data, function(index, value) {
if (index == 0) {
$("thead").append("<tr id='tr-header'> ");
$.each(Object.keys(data[index]), function(propertyName, value){
$("#tr-header").append("<th>" + value + "</th>");
});
$("thead").append("</tr>");
}
$("tbody").append("<tr id='tr-" + index + "'> ");
$.each(data[index], function(propertyPosition, value){
$("#tr-" + index).append(
"<td>" + data[index][propertyPosition] + "</td>"
);
});
$("tbody").append("</tr>");
});
$('.waitingDiv').hide();
}).fail(function(jqxhr, textStatus, errorThrown){
console.log("failed");
});
});
<script>
You can check for if propertyName is in an array of keys that you want to show.
var keys_to_show = ["short", "long", "price", "volume"];
$.each(Object.keys(data[index]), function(propertyName, value) {
if (keys_to_show.includes(propertyName)) {
$("#tr-header").append("<th>" + value + "</th>");
}
});
I am trying to get some data from a public API for a test project. But it is showing blank page when I'm using below code:
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<script>
$(document).ready(function () {
$.getJSON(http://api.wmata.com/StationPrediction.svc/json/GetPrediction/A10,A11?api_key=hadtcpbh3w5xjbtyqrzgm88x',
function (json) {
var tr;
for (var i = 0; i < json.length; i++) {
tr = $('<tr/>');
tr.append("<td>" + json[i].userId + "</td>");
tr.append("<td>" + json[i].id + "</td>");
tr.append("<td>" + json[i].title + "</td>");
tr.append("<td>" + json[i].body + "</td>");
$('table').append(tr);
}
});
});
</script>
</body>
</html>
I can see two reason why you see blank page,
As mentioned in above comment -- A missing single quote in $.getJSON URL, see you browser console for the errors before posting question in SO
$.getJSON('http://api....', function(json){...})
You are appending all data to <table> tag but <table> tag is not there in your markup. Add a <table> tag, so that jQuery can append your data. Or dynamically create <table> element inside your ajax call.
Here's your modified code,
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<table></table>
<script>
$(document).ready(function () {
$.getJSON('http://api.wmata.com/StationPrediction.svc/json/GetPrediction/A10,A11?api_key=hadtcpbh3w5xjbtyqrzgm88x',
function (json) {
var tr;
for (var i = 0; i < json.length; i++) {
tr = $('<tr/>');
tr.append("<td>" + json[i].userId + "</td>");
tr.append("<td>" + json[i].id + "</td>");
tr.append("<td>" + json[i].title + "</td>");
tr.append("<td>" + json[i].body + "</td>");
$('table').append(tr);
}
});
});
</script>
</body>
</html>
There are few issues with your code:
1. You have a syntax error in getJSON function.
2. Table element is not defined in your html.
3. The object you are getting back is an array of 'Trains'. So you would need to get trains by json["Trains"]
Here is your modified code:
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<table>
</table>
<script>
$(document).ready(function () {
$.getJSON("http://api.wmata.com/StationPrediction.svc/json/GetPrediction/A10,A11?api_key=hadtcpbh3w5xjbtyqrzgm88x",
function (json) {
var trains = json["Trains"];
var tr;
for (var i = 0; i < trains.length; i++) {
tr = $('<tr/>');
tr.append("<td>" + trains[i].Car + "</td>");
tr.append("<td>" + trains[i].Destination + "</td>");
$('table').append(tr);
}
});
});
</script>
</body>
</html>
I am making admin portal, where admin can see the total number of current booking, for this we have to refresh table every 10 sec automatically and there will be also refresh button, which also refresh the table, I am using the JQuery, Ajax, Json, Spring MVC, I am trying to make more than one Jquery table which are refreshing theirself every 10 seconds, But only one table is refreshing, other is not. , Thanks in advance for help and any suggestion,
<html>
<head>
<title>Service for home - New Page - Next Generation of Service Provider - Admin Home Page</title>
<!-- Bootstrap -->
<link href="bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="bootstrap/css/bootstrap-responsive.min.css" rel="stylesheet" media="screen">
<link href="assets/styles.css" rel="stylesheet" media="screen">
<link href="assets/DT_bootstrap.css" rel="stylesheet" media="screen">
<!--[if lte IE 8]><script language="javascript" type="text/javascript" src="vendors/flot/excanvas.min.js"></script><![endif]-->
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="vendors/modernizr-2.6.2-respond-1.1.0.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="text/javascript">
function fetchData(){
$(".data-contacts1-js tbody").empty();
$.get("http://localhost:8080/HotelServiceProvider/getAllHotelBookingDetails", function(data) {
$.each(data, function(i, contact) {
$(".data-contacts1-js").append(
"<tr><td>" + contact.custId + "</td>" +
"<td>" + contact.custName + "</td>" +
"<td>" + contact.custMobile + "</td>" +
"<td>" + contact.custEmail + "</td>" +
"<td>" + contact.custAddress + "</td>" +
"<td>" + contact.Date + "</td>" +
"<td>" + contact.Time + "</td></tr>"
);
});
});
}
$(document).ready(function(){
$(".data-contacts1-js tbody").empty();
setInterval(function(){
fetchData();
},10000); // this will call your fetchData function for every 5 Sec.
});
$(document).ready(function(){
$(".data-contacts1-js tbody").empty();
$('#fetchContacts1').click(function() {
fetchData();
});
});
</script>
<script type="text/javascript">
function fetchData(){
$(".data-contacts2-js tbody").empty();
$.get("http://localhost:8080/PGServiceProvider/getAllPgBookingDetails", function(data) {
$.each(data, function(i, contact) {
$(".data-contacts2-js").append(
"<tr><td>" + contact.custId + "</td>" +
"<td>" + contact.custName + "</td>" +
"<td>" + contact.custMobile + "</td>" +
"<td>" + contact.custEmail + "</td>" +
"<td>" + contact.custAddress + "</td>" +
"<td>" + contact.Date + "</td>" +
"<td>" + contact.Time + "</td></tr>"
);
});
});
}
$(document).ready(function(){
$(".data-contacts2-js tbody").empty();
setInterval(function(){
fetchData();
},10000); // this will call your fetchData function for every 5 Sec.
});
$(document).ready(function(){
$(".data-contacts2-js tbody").empty();
$('#fetchContacts2').click(function() {
fetchData();
});
});
</script>
</head>
<body>
<div class="container-fluid">
<div class="row-fluid">
<!--/span-->
<div class="span9" id="content">
<div class="row-fluid">
<!-- block -->
<div class="block">
<div class="navbar navbar-inner block-header">
<div class="muted pull-left">Carpenter Services</div>
</div>
<div class="block-content collapse in">
<div class="span12">
<table class="data-contacts1-js table table-striped" >
<thead>
<tr>
<th>ID</th>
<th>Customer Name</th>
<th>Customer Mobile</th>
<th>Customer Email</th>
<th>Address</th>
<th>Date</th>
<th>Time</th>
<th>Status</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<button id="fetchContacts1" class="btn btn-default" type="submit">Refresh</button>
</div>
</div>
<!-- /block -->
</div>
<div class="row-fluid">
<!-- block -->
<div class="block">
<div class="navbar navbar-inner block-header">
<div class="muted pull-left">Carpenter Services</div>
</div>
<div class="block-content collapse in">
<div class="span12">
<table class="data-contacts2-js table table-striped" >
<thead>
<tr>
<th>ID</th>
<th>Customer Name</th>
<th>Customer Mobile</th>
<th>Customer Email</th>
<th>Address</th>
<th>Date</th>
<th>Time</th>
<th>Status</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
<button id="fetchContacts2" class="btn btn-default" type="submit">Refresh</button>
</div>
</div>
<!-- /block -->
</div>
</div>
</div>
</div>
<!--/.fluid-container-->
<script src="vendors/jquery-1.9.1.js"></script>
<script src="bootstrap/js/bootstrap.min.js"></script>
<script src="vendors/datatables/js/jquery.dataTables.min.js"></script>
<script src="assets/scripts.js"></script>
<script src="assets/DT_bootstrap.js"></script>
<script>
$(function() {
});
</script>
</body>
</html>
You defined fetchData twice. Because you call the functions in your callback it does not matter that those functions are defined in two different script tags.
Both fetchData are defined in the global scope, and the second one overwrites the first one. Thats why .data-contacts2-js is only update.
This example shows the different behaviors when functions a looked up.
<!-- script block 1 -->
<script>
setTimeout(test,100);//will call test #1
setTimeout(function() {
test();//will call test #2
},100);
//test #1
function test() {
console.log(1);
}
</script>
<!-- script block 2 -->
<script>
setTimeout(test,100); //will call test #2
setTimeout(function() {
test(); //will call test #2
},100);
//test #2
function test() {
console.log(2);
}
</script>
First the script block 1 is evaluated, because of that setTimeout(test,100); refers to the test #1 function.
Then the second script block is evaluated, before it is executed the test #2 is already known and because of that the setTimeout(test,100); in the second script block refers to test #2.
When the cllback for both setTimeout(function() {test();},100); executed after 100ms the test() inside this callback will call test #2 for both script blocks, as test #2 is shadowing test #1