html scrollable tbody with fixed thead not working - html

I have a jsp that has multiple <table> in a page. I want only one particular table to be of fixed height and have a scrollable <tbody> and fixed <thead>.
For that I have written a custom CSS as a class so that I can use it in that paricular table. But its not working.
Here is the CSS:
.scroll-tbody{
display: block;
height: 460px;
overflow-y: auto;
}
And here is the JSP snippet:
<table class="table table-hover table-condensed">
<thead>
<tr>
<td><b>&nbsp &nbsp Name</b></td>
<td><b>Phone</b></td>
<td><b>Total Exp.</b></td>
<td><b>Location</b></td>
<td><b>Profile Type</b></td>
<td><b>Domain</b></td>
<td><b>Assigned To</b></td>
<td><b>Status</b></td>
<td><b>Date</b></td>
</tr>
</thead>
<tbody class="scroll-tbody"> <!-- HERE IS THE CUSTOM CSS FOR SCROLLING -->
<%
if(fullList.size()>0)
{
Iterator itr = fullList.iterator();
while(itr.hasNext())
{
FileService fs = new FileService();
File prf = (File)itr.next();
String prfData = prf.getAbsolutePath() + "#";
prfData += fs.readData(prf.getAbsolutePath(),"","profiledata");
prfData = prfData.replace("\\","/");
String[] data = prfData.split("#");
String name = data[1].replace("_"," ");
String phone = data[2];
String totExp = data[3];
String location = data[5];
String prfType = data[6];
String domain = data[7];
String assignedTo = data[8];
String status = data[9];
String prfDate = data[12];
prfData = prfData.replace("'","\\'");
prfData = prfData.replace("\"","\\'");
prfData = prfData.replace("\r\n","^");
System.out.println("---->JSP Data: "+prfData+"\n");
session.setAttribute("dataToEdit",prfData);%>
<tr>
<td><a data-toggle="modal" data-target="#editProfileModal" onClick="getData('<%=prfData%>')"><i class="fa fa-fw fa-file"></i><font size="2"><%=name%></font></a></td>
<td><font size="2"><%=phone%></font></td>
<td><font size="2"><%=totExp%></font></td>
<td><font size="2"><%=location%></font></td>
<td><font size="2"><%=prfType%></font></td>
<td><font size="2"><%=domain%></font></td>
<td><font size="2"><%=assignedTo%></font></td>
<td><font size="2"><%=status%></font></td>
<td><font size="2"><%=prfDate%></font></td>
</tr>
<% }
} %>
</tbody>
</table>
I dont want to write the CSS like: table{...} thead{...} tbody{...} as it will impact all the tables present in that page.
Am I missing something?
Thanks in advance.

Related

How can create an editable JQuery datatable

I am creating an editable JQuery data-table from the model list . I want to edit some of the column [Rate, Qty, IsBranded, Description] of each record listed in a table. My code is given below.
ProductModel
Id int
Name string
Rate decimal
Qty int
Price decimal
Description string
Html and Javascript
<script type="text/javascript">
$("document").ready(function () {
$('#tbllist').DataTable();
});
</script>
#model List<Product>
<table id="tbllist" class="cell-border" style="width:100%">
<thead class="thead-light">
<tr>
<td>Name</td>
<td>Rate</td>
<td>Qty</td>
<td>total</td>
<td>IsBranded</td>
<td>Description</td>
</tr>
</thead>
<tbody>
#if (Model != null)
{
for (var i = 0; i < Model.Count; i++)
{
<tr>
<td>#Model[i].Name</td>
<td>#Model[i].Rate</td>
<td>#Model[i].Qty</td>
<td>#Model[i].total</td>
<td><input type="checkbox" #(Model[i].IsBranded ? "checked" : "") /></td>
<td>#Model[i].Description</td>
</tr>
}
}
</tbody>
</table>
I want to make edit Rate,Qty, Description, IsBranded column. It would be very appreciated , if someone can help me with appropriate code to make .
With Thanks
Alan
I made an example based on #StéphaneLaurent comment, hope it can work for you.
Copy the dataTables.cellEdit.js to your project, you can place it under wwwroot/js
Reference it in your page
<script src="~/js/dataTables.cellEdit.js"></script>
Then follow the tutorial.
#model List<ProductModel>
<table id="tbllist" class="cell-border" style="width:100%">
<thead class="thead-light">
<tr>
<td>Name</td>
<td>Rate</td>
<td>Qty</td>
<td>Total</td>
<td>IsBranded</td>
<td>Description</td>
</tr>
</thead>
<tbody>
#if (Model != null)
{
for (var i = 0; i < Model.Count; i++)
{
<tr>
<td>#Model[i].Name</td>
<td>#Model[i].Rate</td>
<td>#Model[i].Qty</td>
<td>#Model[i].Total</td>
<td><input type="checkbox" #(Model[i].IsBranded ? "checked" : "") /></td>
<td>#Model[i].Description</td>
</tr>
}
}
</tbody>
</table>
#section scripts{
<script src="https://cdn.datatables.net/1.10.24/js/jquery.dataTables.min.js"></script>
<script src="~/js/dataTables.cellEdit.js"></script>
<link rel="stylesheet" href="https://cdn.datatables.net/1.10.24/css/jquery.dataTables.min.css" />
<script type="text/javascript">
var table = $('#tbllist').DataTable();
function myCallbackFunction(updatedCell, updatedRow, oldValue) {
console.log("The new value for the cell is: " + updatedCell.data());
console.log("The values for each cell in that row are: " + updatedRow.data());
}
table.MakeCellsEditable({
"onUpdate": myCallbackFunction
});
</script>
}
Result:

How to get checkboxes values for JSP page?

I can get a single value for an item in jsp page by id. But I can't able to get checkboxes value. How can I get checkboxes value by id or anything else. when i will click in order page it will collect all products name and product price
Screenshot
Code is:
<table class="table table-hover table-striped">
<thead>
<tr>
<th>ID</th>
<th>Choose Product</th>
<th>Product Name</th>
<th>Product Price</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<%
String Host = "jdbc:mysql://localhost:3306/shopbilling";
Connection connection = null;
Statement statement = null;
ResultSet rs = null;
Class.forName("com.mysql.jdbc.Driver");
connection = DriverManager.getConnection(Host, "root", "");
statement = connection.createStatement();
String query = request.getParameter("q");
String data;
if(query != null)
{
data = "select * from products_tbl where product_name like '%"+query+"%' or product_price like '%"+query+"%'";
}
else
{
data = "select * from products_tbl";
}
rs = statement.executeQuery(data);
while (rs.next()) {
%>
<tr>
<td><%=rs.getString("id")%></td>
<td> <input type="checkbox" /> </td>
<td><%=rs.getString("product_name")%></td>
<td><%=rs.getString("product_price")%></td>
<td class="text-center" width="250">
Edit
Delete
</td>
</tr>
<%
}
%>
</tbody>
</table>
Order
Here you can use value tag of <input type="checkbox"> to put the data to user.Then you need to give a attribute 'name' to all of these check-boxes, which you can keep same and then you can grab all the selected values as an array.
Here is a changes you need to make in this code::
<table class="table table-hover table-striped">
<thead>
<tr>
<th>ID</th>
<th>Choose Product</th>
<th>Product Name</th>
<th>Product Price</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<%
String Host = "jdbc:mysql://localhost:3306/shopbilling";
Connection connection = null;
Statement statement = null;
ResultSet rs = null;
Class.forName("com.mysql.jdbc.Driver");
connection = DriverManager.getConnection(Host, "root", "");
statement = connection.createStatement();
String query = request.getParameter("q");
String data;
if(query != null)
{
data = "select * from products_tbl where product_name like '%"+query+"%' or product_price like '%"+query+"%'";
}
else
{
data = "select * from products_tbl";
}
rs = statement.executeQuery(data);
while (rs.next()) {
%>
<tr>
<td><%=rs.getString("id")%></td>
<td> <input type="checkbox" name="products" value ="<%=rs.getString("id")%>" /> </td>
<td><%=rs.getString("product_name")%></td>
<td><%=rs.getString("product_price")%></td>
<td class="text-center" width="250">
Edit
Delete
</td>
</tr>
<%
}
%>
</tbody>
</table>
Order
And while receiving the result you need to use something like this::
<%
String products[] = request.getParameterValues("products");
if (products!= null && products.length != 0) {
out.println("You have selected: ");
for (int i = 0; i < products.length; i++) {
out.println(products[i]);
}
}
%>
Hope this helped you!!
Happy Coding:)

Creating HTML Table in AngularJS

var str1 = "Sarah";
var str2 = "Tom";
var strTable = "<table style='width:100%'><tr><th>"+ str1 +"</th><th>"+ str2 +"</th> <th>Age</th> </tr> <tr> <td>Jill</td><td>Smith</td><td>50</td></tr></table>";
$scope.rTable= strTable;
I am trying to pass HTML code in $Scope.rTable but instead of rendering the table it shows the HTML code as it is in the output.
i.e.
<table style='width:100%'><tr><th>Sarah</th><th>Tom</th> <th>Age</th> </tr> <tr> <td>Jill</td><td>Smith</td><td>50</td></tr></table>
I want it like:
Its a improper way to code.
The code should be like
In Controller
$scope.str1 = "Sarah";
$scope.str2 = "Tom";
In HTML
Considering your controller name as DemoController
<body ng-controller="DemoController">
<table style='width:100%'>
<tr><th> {{str1}} </th>
<th> {{str2}} </th>
<th>Age</th>
</tr>
</table>
</body>
And if your data is huge its recommended to use an Array of Object with ng-repeat. you can read it here -> https://docs.angularjs.org/api/ng/directive/ngRepeat
Use ng-bind-html and $sce.
Controller
app.controller('MainCtrl', function($scope, $sce) {
var str1 = "Sarah";
var str2 = "Tom";
var strTable = "<table style='width:100%'><tr><th>" + str1 + "</th><th>" + str2 + "</th> <th>Age</th> </tr> <tr> <td>Jill</td><td>Smith</td><td>50</td></tr></table>";
$scope.rTable = $sce.trustAsHtml(strTable);
});
HTML
<body ng-controller="MainCtrl">
<div ng-bind-html="rTable"></div>
</body>

How to bind Knockout model data to Multiple tables

I am using knockout binding to bind some data into html tables. My knockout view Model had multiple products and each product will have multiple chars. I want to display the products in one table and when i select the link "show chars" it should display the corresponding chars in below table.
This is my View Model
var ProductViewModel = function(items) {
this.items = ko.observableArray(items);
this.itemToAdd = ko.observable("");
this.addItem = function() {
if (this.itemToAdd() != "") {
this.items.push(this.itemToAdd());
this.itemToAdd("");
}
}.bind(this);
};
And this is my html tables
<div id="productTable">
<table class="ui-responsive table">
<thead>
<tr>
<th >Product Name</th>
<th >Description</th>
<th >Parent?</th>
</tr>
</thead>
<tbody id="pBody" data-bind="foreach: items">
<tr class="success" >
<td><span data-bind="text: name"></span>
</td>
<td><span data-bind="text: desc"></span>
</td>
<td>show chars</td>
</tr>
</tbody>
</table>
</div>
</div>
<div id="productChars">
<div id="productCharTable">
<table class="ui-responsive table">
<thead>
<tr>
<th >Char Name</th>
<th >Description</th>
<th >Length</th>
<th >Type</th>
</tr>
</thead>
<tbody id="pBody" data-bind="foreach: $data['chars']">
<tr class="success">
<td><span data-bind="text: name"></span>
</td>
<td>asdf asdfasdf</td>
<td>10</td>
<td>String</td>
</tr>
</tbody>
</table>
</div>
I am able to bind the products into first table. But for characteristics i am not sure how to achieve the same.
Could someone please help me in figuring out how to achieve the same.
Here is the jsfiddle
https://jsfiddle.net/sirisha_k/0Ln7h2bo/7/
As #supercool pointed out you can use "data-bind='with selectedItem'" to populate the second table with chars data. For that you need to add one more item into your model called selectedItem and every time you select or add a row, you point the selectedItem to that elementdata. And use "data-bind='with selecteItem'" for second table.
var ProductViewModel = function(items) {
this.items = ko.observableArray(items);
this.selectedItem = ko.observableArray();
this.itemToAdd = ko.observable("");
this.addItem = function() {
if (this.itemToAdd() != "") {
this.items.push(this.itemToAdd());
this.itemToAdd("");
}
}.bind(this);
};
and on row select call some function selectedItem($data) where $data refers to the current item.
then set that data to selectedItem in model.
function selectedItem(prod){
ProductViewModel.selectedItem(prod);
}

How to declare pagination pagesize in web.config or to my view

I have implemented paging using PageList.MVC. Now I need to that i can change the pagesize from my web.config. Any idea ....
Here is my controller:
public ActionResult UsersWhoHaveConsumedFreeCredit(int Id = 1)
{
var result = Manager.GetUsersWhoHaveConsumedFreeCredit();
JavaScriptSerializer serializer = new JavaScriptSerializer();
var model = serializer.Deserialize<List<CallHistory>>(result);
int pageSize = 100;
//int pageNumber = (page ?? 1);
return View(model.ToPagedList(Id, pageSize));
}
And this is my view
#model PagedList.IPagedList<MyYello.Admin.Models.CallHistory>
#{
ViewBag.Title = "UsersWhoHaveConsumedFreeCredit";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Users Who Have Consumed Free Credit</h2>
#*<table class="table table-striped table-bordered tablesorter" style="display: block">
<thead>
<tr>
<th>Login</th>
<th>FirstName</th>
<th>LastName</th>
<th>Email</th>
<th>Country</th>
<th>TarrifDesc</th>
<th>CalledNum</th>
<th>CallStart</th>
<th>CallEnd</th>
</tr>
</thead>*#
#foreach (var group in Model.GroupBy(dialed => dialed.Login))
{
var item = group.First();
{
<table>
<tbody>
<th class="custom-padding">Login Id</th>
<th class="custom-padding">Phone</th>
<th class="custom-padding">First Name</th>
<th class="custom-padding">Last Name</th>
<th class="custom-padding">Email</th>
<th class="custom-padding">Country</th>
<tr>
<td class="custom-padding">#item.Login </td>
<td class="custom-padding">#item.Phone</td>
<td class="custom-padding">#item.FirstName</td>
<td class="custom-padding">#item.LastName</td>
<td class="custom-padding">#item.Email</td>
<td class="custom-padding">#item.Country</td>
<th class="custom-padding">Dialed Calls:-</th>
<td class="custom-padding">#string.Join(" - ", group.Select(dialed => dialed.DialedNumber))</td> </tr>
#*<td>#item.FirstName</td>
<td>#item.LastName</td>
<td>#item.Email</td>
<td>#item.Country</td>*#
#*<td>#string.Join(" - ", group.Select(history => history.Phone))</td>*#
<tr> #*<td>#item.TariffDescription</td>*#
</tr>
</tbody>
</table>
<hr />
}
}
#* #Html.PagedListPager( (IPagedList)ViewBag.pageNumber, page => Url.Action ("UsersWhoHaveConsumedFreeCredit", new {page}));*#
<div class="paged-list">
#Html.PagedListPager(Model, Id => Url.Action("UsersWhoHaveConsumedFreeCredit", new { Id }), PagedListRenderOptions.Classic)
</div>
#if (!Model.Any())
{
<h2>No Record Found</h2>
}
I don't think you want this to be controlled from web.config however, you can do this by having a key inside appsettings section in web.config file.
<appSettings>
<key name="pageSize" value="10"/>
</appSettings>
And then you can access inside your code as
int pageSize = Convert.ToInt32(ConfigurationManager.AppSettings["pageSize"])
Typically you would want users to control pageSize from the view.