I have JSON data and from that i am building my Table. Below is an extract of my code.
var table = '';
table = " <table class='table table-bordered table-striped mb-0' id='datatable-tabletools'>";
table += "<thead>";
table += "<tr>";
table += "<th> <i class='glyphicon glyphicon-wrench'></i> Actions</th>";
table += "<th>PAX</th>";
table += "<th>Group No</th>";
table += "<th>Group Name</th>";
table += "</tr>";
table += "</thead>";
table += "<tbody>";
for (var j = 0; j < data.length; j++) {
table += "<tr>";
table += "<td>" + data[j]["PAX"] + "</td>";
table += "<td>" + (data[j]["GroupNo"] == undefined ? '' : data[j]["GroupNo"]) + "</td>";
table += "<td>" + (data[j]["GroupName"] == undefined ? '' : data[j]["GroupName"]) + "</td>";
table += "</tr>";
}
table += "</tbody>";
table += "</table>";
$('#gridContainer').html(table);
$("table#datatable-tabletools").dataTable();
As you can see in the code above I am trying to append it to a div with id="gridContainer". Up till here I have things up and running as required but the issue is my EXPORT bar doesn't appear at all. Currently, the searching, sorting functionalities and the table structure are all fine. Below is a screenshot of how it looks currently.
But when i declare a static table instead of appending the table to a DIV tag it appears fine and the exporting options also appear and are functiona. This is how the top header looks then
How to resolve this issue?
Related
Using this example https://www.jqueryscript.net/table/jQuery-Plugin-To-Generate-A-Table-From-A-CSV-File-CSV-Parser.html
I set up a HTML table that takes a CSV file from multiple Raspberry PIs (via SSH) and displays this CSV output as a HTML table:
2018-03-22 12:43:21,NM_Test.h264,-2
My HTML page runs the following script:
<!DOCTYPE html>
<body>
<div id="container"></div>
<script>
$.get('ssh.php', function(data) {
// start the table
var html = '<table">';
// split into lines
var rows = data.split("\n");
// parse lines
rows.forEach( function getvalues(ourrow) {
// start a table row
html += "<tr>";
// split line into columns
var columns = ourrow.split(",");
html += "<td>" + columns[0] + "</td>";
html += "<td>" + columns[1] + "</td>";
html += "<td>" + columns[2] + "</td>";
// close row
html += "</tr>";
})
// close table
html += "</table>";
// insert into div
$('#container').append(html);
});
</script>
</body>
</html>
My SSH.php:
// set up SSH2 conenctions using config.php to connect to multiple PIs and execute:
echo $ssh->exec('tail -1 /var/log/playlog.csv');
Config.php:
return [
[
"name" : "test1",
"ip" : "127.0.0.1",
"port": 97,
"key" : 'ssh-dss AAAAB3NzaC1kc3MAA...c3=',
]
[ ... ]
];
In my HTML table how can I add column names such as:
<tr>
<th>PI Name</th>
<th>Date/Time</th>
<th>Playing</th>
<th>Error</th>
</tr>
But for the 'PI Name' column how can I return the corresponding 'name' that I have defined for each PI inside my config.php file?
I'm having difficulty with using HTML tags inside jQuery.
The easiest way is to add the PI name as the first element in each row of your CSV file, so in PHP code not in JavaScript code.
CSV file should look like that:
test1,2018-03-22 12:43:21,NM_Test.h264,-2
After you adjusted CSV format, make this JavaScript changes:
<script>
$.get('ssh.php', function(data) {
// start the table
var html = '<table>';
// add column headers
html += '<tr><th>PI Name</th><th>Date/Time</th><th>Playing</th><th>Error</th></tr>';
// split into lines
var rows = data.split('\n');
// parse lines
rows.forEach( function getvalues(ourrow) {
// start a table row
html += "<tr>";
// split line into columns
var columns = ourrow.split(",");
html += "<td>" + columns[0] + "</td>";
html += "<td>" + columns[1] + "</td>";
html += "<td>" + columns[2] + "</td>";
html += "<td>" + columns[3] + "</td>";
// close row
html += "</tr>";
})
// close table
html += "</table>";
// insert into div
$('#container').append(html);
});
</script>
I am trying to showmodal method, but getting error while taken string. if pass int it calls, how to take string in javascript.
<script>
var table = ' <table id="example" class="table table-striped " width="100%"> <thead>';
table += ' <tr class="success">';
table += '<th>Sender</th>';
table += '<th>Recipient</th>';
table += '<th>Mail Server</th>';
table += '<th>Arrival Time</th>';
table += '</tr>';
table += '</thead>';
table += '<tbody>';
for (var i = 0; i < data.u.length; i++) {
table += '<tr><td><a href="javascript:showModal('+data.u[i].sender+')">';
table += data.u[i].sender + '</a></td><td>' + data.u[i].receiver;
table += '</td><td>' + data.u[i].mail_server + '</td></tr>';
}
table += '</tbody>';
table += '</table>';
$("#resp1").html(table);
function showModal (id) {
alert("hi ");
}
</script>
You're missing quotation marks in the function call
Change this line
table += '<tr><td><a href="javascript:showModal('+data.u[i].sender+')">';
To this line
table += '<tr><td><a href="javascript:showModal(\''+data.u[i].sender+'\')">';
I need to implement drag and drop feature form one table to another and vise versa.
This is my function where i get transactions to particular IBAN number, I also have the same function which retrieves users transaction which are hidden.
function getAllTransactions(iban) {
var iban = $("#ibanSelection").val();
var username = $("#hiddenusername").val();
var url = 'http://localhost:64300/api/BankAccountApi/GetUserTransaction/?iban=' + iban;
var table = "<table id=\"table1\">";
if ((username != "") && (iban !="")) {
$.getJSON(url, function (data) {
table += "<tr class=\"ibanSelection\">";
table += "<th>My IBAN</th>";
table += "<th>Send to IBAN</th>";
table += "<th>Transfer Date</th>";
table += "<th>Amount</th>";
table += "</tr>";
$.each(data, function (key, val) {
table += "<tr class=\"draggable_tr\">";
table += "<td>" + val.My_Iabn + "</td>";
table += "<td>" + val.Iban_To + "</td>";
table += "<td>" + val.Transfer_Date + "</td>";
table += "<td>" + val.Amount_Transferd + "</td>";
table += "</tr>";
});
table += "</table>";
$("#divResult2").html(table);
});
}
}
Just use the jQueryUI Sortable feature.
Here's the complete example + documentation. Very easy.
Also this example shows your case:
http://jqueryui.com/sortable/#connect-lists
I am developing first JSP application. I have two database tables in MS Access connected with JSP using DSN. What I have to do is very simple. I have a input text box which takes "ID" as input and a Button to view Record. On Button Click, result set will be retrieved from both the tables having records with ID same as input in textbox.
On Button Click, a table should be dynamically created displaying the values retrieved in result set.OnClick Calls a Javascript method ShowData and passes it the values of result set which are placed in dynamic tables.
So form elements' values will be processed after onClick and my result set having records before onClick, as you can see in the code, therefore, I am not able to display correct result as text-input goes null in query and inaccurate result set is achieved.
Please guide me how to properly send text input value to query on ButtonClick Event.
Hope I am clear.
<%# page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<%#page import="java.sql.*"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSP Page</title>
<script language="javascript">
// creating dynamic tables
function showData(std_id,std_name,std_prog,std_email,std_semester,std_course,std_status,std_title,std_score,std_credit_hour){
var width = 25;
var theader = "<table border='5' id='table1' width = ' "+ width +"% '>";
var tbody = "";
var t2header = "<table border='5' id='table2' width = ' "+ width +"% '>";
var t2body ="";
tbody += "<tr>";
tbody += "<td>";
tbody += "Student ID";
tbody += "</td>";
tbody += "<td>";
tbody += std_id;
tbody += "</tr>";
tbody += "<tr>";
tbody += "<td>";
tbody += "Student Name";
tbody += "</td>";
tbody += "<td>";
tbody += std_name;
tbody += "</tr>";
tbody += "<tr>";
tbody += "<td>";
tbody += "Study Program";
tbody += "</td>";
tbody += "<td>";
tbody += std_prog;
tbody += "</tr>";
tbody += "<tr>";
tbody += "<td>";
tbody += "Email";
tbody += "</td>";
tbody += "<td>";
tbody += std_email;
tbody += "</tr>";
t2body += "<tr>";
t2body += "<td>";
t2body += "Semester";
t2body += "</td>";
t2body += "<td>";
t2body += "Course";
t2body += "</td>";
t2body += "<td>";
t2body += "Title";
t2body += "</td>";
t2body += "<td>";
t2body += "Status";
t2body += "</td>";
t2body += "<td>";
t2body += "Score";
t2body += "</td>";
t2body += "<td>";
t2body += "Credit Hour";
t2body += "</td>";
t2body += "</tr>";
t2body += "<tr>";
t2body += "<td>";
t2body += std_semester;
t2body += "</td>";
t2body += "<td>";
t2body += std_course;
t2body += "</td>";
t2body += "<td>";
t2body += std_title;
t2body += "</td>";
t2body += "<td>";
t2body += std_status;
t2body += "</td>";
t2body += "<td>";
t2body += std_score;
t2body += "</td>";
t2body += "<td>";
t2body += std_credit_hour;
t2body += "</td>";
t2body += "</tr>";
var tfooter = "</table>";
document.getElementById('wrapper').innerHTML = theader + tbody + tfooter;
document.getElementById('new_wrapper').innerHTML = theader + t2body + tfooter;
}
</script>
</head>
<body>
<div id="container" style="height:600px;width:700px;border:#6666ff; border-style: solid;background-color: aliceblue" >
<div id='content' style='height:330px;width: 550px;text-align: left;background-color: #F3F3F3;float: left;border:#6666ff'>
<h3>Enter Student ID to View Grade Book Information</h3>
<form id="myform" action="viewGradeBook.jsp" method="POST" >
Enter Student ID <input type="text" name="View_Std_Id" value="" /> // it need to be sent to query
<br/>
<%
String id_input = request.getParameter("View_Std_Id");
Class.forName("sun.jdbc.odbc.JdbcOdbcDriver");
String conUrl = "jdbc:odbc:GradeBookDSN";
Connection con = DriverManager.getConnection(conUrl);
String sql = " SELECT * FROM StudentProfile , GradeBook WHERE StudentProfile.StudentID AND GradeBook.StudentID = '"+id_input+"' ";
PreparedStatement pStmt = con.prepareStatement(sql);
ResultSet rs = pStmt.executeQuery();
String id= "";
String name="";
String prog="";
String email ="";
String semester = "";
String course = "";
String status = "";
String title = "";
String score = "";
String credit_hour = "";
while(rs.next()){
// The row name is ―name‖ in database ―PersonInfo,// hence specified in the getString() method.
id = rs.getString("StudentID");
name = rs.getString("StudentName");
prog = rs.getString("StudyProgram");
email = rs.getString("Email");
semester = rs.getString("Semester");
course = rs.getString("Course");
status = rs.getString("Status");
title = rs.getString("Title");
score = rs.getString("Score");
credit_hour = rs.getString("CreditHour");
}
%>
<input type="button" value="View Record" onclick="showData(.......)"/>
<div id="wrapper"></div>
<br/>
<div id="new_wrapper"></div>
</form>
</div>
<div id='footer' style="background-color: #C2D5FC;clear: both;text-align: center;border:#6666ff">Copyrights#vu2014</div>
</div>
</body>
</html>
You won't be able to acheive this in a single JSP load.
The JSP is a view that is evaluated and rendered on a single web request (a request correspond to the loading of your web page)
If you click on a button you will then you are already on the client side and you don't have access to the database which is on the server side.
You have to generate a second request (for example, instead of a button you put a submit and you put it inside a form) and you pass parameters to this request to allow the server to execute the SQL query.
With this approach you won't need to inject some html in javascript.
You should read more about N-tier architecture, servlets and the MVC model.
The good practice is to have :
a servlet (controller) that do the treatment (your sql query) and generates one or more beans.
the java beans (model) that contains the data to be displayed
the JSP (the view) that only displays the html with the dynamic values contained in the view
This structure will help you to
understand what happens really in a web application.
deal with exceptions (your database access is not well coded, you have to manage exceptions and close the connection in a finally block)
test your treatments without the graphical issues.
you can try this link as a start
http://rathinasaba.wordpress.com/2011/10/13/simple-webapplication-using-servlet-and-jsp/
I have this code to display details from database to jsp. I'm using core:forEach to sort through the list of results.But now inorder to simplify jsp code I'm implementing the core:forEach in javascript.And I'm displaying the results in a dynamically created table. But now while using core:forEach in javascript, only the last value in the list is getting displayed. Code is as follows.
window.onload = function CreateTable()
{
<core:forEach items="${requestScope.projectWiseDetails}" var="row">; //first list sorting based on project name
var tablecontents = "";
tablecontents = "<table>"; //dynamic table
tablecontents += "<tr>";
tablecontents += "<td>" + "Resource Name" + "</td>";
tablecontents += "</tr>";
<core:forEach items="${row.onsite3to5YearsList}" var="resource"> //second sorting which comes under project name
tablecontents += "<tr>";
tablecontents += "<td>" +<core:out value="${resource.resourceName}"></core:out>+ "</td>";
</core:forEach>
tablecontents += "</tr>";
tablecontents += "</table>";
</core:forEach>
document.getElementById("tablespace").innerHTML = tablecontents; //attaching the table to an element
}
<p id="tablespace"></p> //This is where the table gets generated
You're overriding tablecontents everytime, take var tablecontents = "" outside the loop, then replace tablecontents = "<table>" with tablecontents += "<table>".
window.onload = function CreateTable()
{
var tablecontents = "";
<core:forEach items="${requestScope.projectWiseDetails}" var="row">; //first list
tablecontents += "<table>";
// The rest of your code