My HTML table is getting more time to load when the row count is large. I have to load almost 50000 row table to the webpage. I just used basic HTML table. ASP.NET C#.
<div class="panel panel-primary">
<div class="panel-heading">
<h3 class="panel-title">Available Resistors In Stock</h3>
<!--
<input type="text" class="form-control pull-right" id="task-table-filter" data-action="filter" data-filters="#task-table" placeholder="Filter Resistors" />
-->
</div>
<table class="table table-hover" id="task-table">
<thead>
<tr>
<th class="center">#</th>
<th class="center">Resistor Type</th>
<th class="center">Resistor Value</th>
<th class="center">Ohm</th>
<th class="center">Location</th>
<th class="center">PL</th>
<th class="center">Place</th>
<th class="center">Category</th>
<th class="center">Quantity</th>
<th class="center">Part NO</th>
<th class="center">Description</th>
<th class="center">Active</th>
<th class="center">Edit</th>
</tr>
</thead>
<tbody>
#for (int i = 0; i < Model.Rows.Count; i++)
{
<tr class="center">
<td>#Model.Rows[i][0]</td>
<td>#Model.Rows[i][1]</td>
<td>#Model.Rows[i][2]</td>
<td>#Model.Rows[i][3]</td>
<td>#Model.Rows[i][4]</td>
<td>#Model.Rows[i][5]</td>
<td>#Model.Rows[i][6]</td>
<td>#Model.Rows[i][7]</td>
<td>#Model.Rows[i][8]</td>
<td>#Model.Rows[i][9]</td>
<td>#Model.Rows[i][10]</td>
<td>#Model.Rows[i][11]</td>
<td>
<a href="#Url.Action("StoreAddResistors", "Store",new {#id=#Model.Rows[i][0] } )">
<span class="glyphicon glyphicon-refresh"></span>
</a>
</td>
</tr>
}
</tbody>
</table>
</div>
Is there any way to reduce the loading time of the webpage?
try to split the page into several. Or is it possible to somehow connect several html documents to 1 page? I have no more idea
Related
I'm trying to make a simple library management app using Django. I don't know how to send data present in HTML table rows to the backend for storing into the database
I know I can use JSON but I think there is a more sophisticated way ...
This is the code please help I appreciate that...
{% extends 'home.html' %}
{% block b %}
<div class="container">
<table class="table">
<thead>
<tr>
<th scope="col">book_name</th>
<th scope="col">writer_name</th>
<th scope="col">category</th>
<th scope="col">Sub_category</th>
<th scope="col">price</th>
<th scope="col">quntity</th>
</tr>
</thead>
<tbody id="table">
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
<td>123</td>
<td>1w3</td>
</tr>
</tbody>
</table>
<input type="button" class="btn btn-primary" value="store"/>
</div>
<hr />
<div class="container">
{{ form}}
<input type="button" class="btn btn-primary" value="orderd" id="orderd" />
</div>
I can't seem to align the table head with the table body.
This is for my project making a web-type student data-storing database.
<table class="table table-striped">
<thead>
<tr>
<th scope="col">Id</th>
<th scope="col">NIM</th>
<th scope="col">Nama</th>
<th scope="col">Jenis Kelamin</th>
<th scope="col">Alamat</th>
<th scope="col">Nama Bapak</th>
<th scope="col">Nama Ibu</th>
<th scope="col">Jurusan</th>
<th scope="col">Prodi</th>
<th scope="col">IPK Terakhir</th>
<th scope="col">Hapus</th>
</tr>
</thead>
<tbody *ngFor="let mhs of mhss">
<a routerLink="/detail/{{mhs.id}}">
<tr>
<td>{{mhs.id}}</td>
<td>{{mhs.nim}}</td>
<td>{{mhs.name}}</td>
<td>{{mhs.jk}}</td>
<td>{{mhs.alamat}}</td>
<td>{{mhs.nama_bapak}}</td>
<td>{{mhs.nama_ibu}}</td>
<td>{{mhs.jurusan}}</td>
<td>{{mhs.prodi}}</td>
<td>{{mhs.ipk}}</td>
<td><button class="delete" title="delete mhs"
(click)="delete(mhs)">HAPUS</button></td>
</tr>
</a>
</tbody>
</table>
My image:
Your code is generating a new <tbody> for every item in your array. Add the *ngfor structural directive to your table rows (<tr>).
Can anyone please suggest the best way to implement sorting in angular 6 using botstrap. This is my table.
I need to sort the table using mrp , ssp ,ymp .
I tried to search for tutorials , but there is angularjs implementation all over the internet .
Can anyone suggest a proper angular 6 implemetation using data table
<table id="myTable" class="table table-striped table-bordered table-dark" #myTable>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Id</th>
<th scope="col">Image</th>
<th scope="col">Name</th>
<th scope="col">Seller</th>
<th scope="col">Category</th>
<th scope="col">Status</th>
<th scope="col" sortable="mrp.value" class="sortable">MRP
</th>
<th scope="col" class="sortable">SSP
</th>
<th scope="col" class="sortable" >YMP
</th>
<th scope="col" class="sortable">Date Added
</th>
</tr>
</thead>
<tbody *ngFor ="let tempProduct of products">
<tr>
<th scope="row"><input type="checkbox" name="cbProducts"
value=`${{tempProduct.id}}`></th>
<td>{{tempProduct.id}}</td>
<td>
<img
src="http://localhost:8080/YourMart-PMP-Admin-
Panel/resources/images/{{tempProduct.primaryImg}}"
height="50" width="50">
</td>
<td>{{tempProduct.name}}</td>
<td>{{tempProduct.seller.name}}</td>
<td>{{tempProduct.category.name}}</td>
<td>{{tempProduct.status}}</td>
<td >{{tempProduct.mrp}}</td>
<td >{{tempProduct.ssp}}</td>
<td >{{tempProduct.ymp}}</td>
<td >{{tempProduct.created}}</td>
</tr>
</tbody>
</table>
I have an html table that is cutting off all rows beyond the 200th. The rows are in fact there, because the list.js javascript search feature will find data in them if I search for it, but they don't display when the table loads.
Is this a limitation or setting in bootstrap or some other html thing?
Update - here is a simplified version of the table.
Also, the javascript libraries I'm using on this page that interact with the table are list.js and treetable.js.
I will note that I have seen this issue on another app I developed, but 99% of the time it wasn't an issue so it was never resolved. On this app in question, it will almost always be an issue.
<div class="table">
<div class="table-responsive" id="table3div">
<table class="table table-hover table-condensed tablesorter" id="table3">
<thead>
<tr>
<th>
<div class="checkbox custom-control custom-checkbox">
<label>
<input type="checkbox" id="checkAlltable3" />
<span class="custom-control-indicator"></span>
</label>
</div>
</th>
<th class="header">Description</th>
<th class="header">Status</th>
<th class="header">Associated With</th>
<th class="header">Assigned To</th>
<th class="header">ID</th>
<th class="header">Type</th>
<th class="header headerSortDown">Due Date</th>
</tr>
</thead>
<tbody class="list">
#for (int i = 0; i < Model.IssuesAndNotes.Count; i++)
{
<tr>
<td>
<div class="checkbox custom-control custom-checkbox">
<input id="checkBox" type="checkbox">
</div>
</td>
<td class="description">
Some data
</td>
<td class="status">
Some data
</td>
<td class="association">
Some data
</td>
<td class="assignedTo">
Some data
</td>
<td class="issueId">
Some data
</td>
<td class="type">
Some data
</td>
<td class="date">
Some data
</td>
</tr>
}
</tbody>
</table>
</div>
The default limit in list.js is 200 you can modify the limit in the parameters https://github.com/javve/list.js#parameters
For clarification look to the API docs on page options http://listjs.com/api/
I have found something unusual and was wondering if this is intentional behaviour and if there is a fix for this. I would ideally like to stay within bootstrap without having to specify specific widths.
I am using twitter bootstrap to format a table. However when there is a table with no data the column widths are different to a table with data, i.e. a body with rows.
I have created a jsFiddle to demo this. jsFiddle
Here is the html.
<div class="col-md-10 col-md-offset-1">
<div class="col-md-12 category-header"><span class="">Turbo</span></div>
<div class="col-md-12 no-padding">
<div class="table-responsive">
<table class="table no-margin">
<thead>
<tr>
<th class="text-left col-md-1">Part No.</th>
<th class="text-left col-md-3">Description</th>
<th class="text-center col-md-3">Notes</th>
<th class="text-center col-md-2">Dates</th>
<th class="text-center col-md-1">Stock</th>
<th class="text-right col-md-1">RRP</th>
<th class="col-md-1"></th>
</tr>
</thead>
<tbody>
<tr>
<td class="col-md-1">ISTB10768R</td>
<td class="col-md-3">REMANUFACTURED TURBO</td>
<td title="" class="col-md-3 text-center"></td>
<td class="col-md-2 text-center"></td>
<td class="col-md-1 text-center">
<i title="" data-placement="top" data-toggle="tooltip" class="fa fa-check amber black-tooltip" data-original-title="Less than three units in stock"></i>
</td>
<td class="col-md-1 text-right">£370.00</td>
<td class="col-md-1 text-right">
<span data-part-number="ISTB10768R" data-part-id="564" href="#" class="glyphicon glyphicon-shopping-cart add-to-cart-btn pink " title="Add To Cart ">Add</span>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="col-md-12 category-header"><span class="">Gear Boxes</span></div>
<div class="col-md-12 no-padding">
<div class="table-responsive">
<table class="table no-margin">
<thead>
<tr>
<th class="text-left col-md-1">Part No.</th>
<th class="text-left col-md-3">Description</th>
<th class="text-center col-md-3">Notes</th>
<th class="text-center col-md-2">Dates</th>
<th class="text-center col-md-1">Stock</th>
<th class="text-right col-md-1">RRP</th>
<th class="col-md-1"></th>
</tr>
</thead>
<tbody/>
</table>
<div class="missing-parts">Please call the sales team for price and availability</div>
</div>
</div>
</div>
I am sorry but there is a problem in the code you provided(specifically in the second table), perhaps a typo. Which is causing the overflow.
Second table code you provided
<table class="table no-margin">
<thead>
<tr>
<th class="text-left col-md-1">Part No.</th>
<th class="text-left col-md-3">Description</th>
<th class="text-center col-md-3">Notes</th>
<th class="text-center col-md-2">Dates</th>
<th class="text-center col-md-1">Stock</th>
<th class="text-right col-md-1">RRP</th>
<th class="col-md-1"></th>
</tr>
</thead>
<tbody/>
</table>
<div class="missing-parts">Please call the sales team for price and availability</div>
As you can see the <tbody/> is wrong. There is no starting <tbody> tag & the closing tag should be </tbody>. Also there the missing-parts in nowhere inside the table body. It is outside the table body and that's why the weird behavior.
I have provided the correct code below. Here is the updated Fiddle. Works fine now.
Corrected table code
<table class="table no-margin">
<thead>
<tr>
<th class="text-left col-md-1">Part No.</th>
<th class="text-left col-md-3">Description</th>
<th class="text-center col-md-3">Notes</th>
<th class="text-center col-md-2">Dates</th>
<th class="text-center col-md-1">Stock</th>
<th class="text-right col-md-1">RRP</th>
<th class="col-md-1"></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="missing-parts">Please call the sales team for price and availability</div>
</td>
</tr>
</tbody>
</table>
Very important thing to note here is that, even though you have not specified any number of data columns under the first <tr>, it automatically assigns the <td> values to its respective <th>s.
In other words. If you mention only one <td>, it will automatically become the data of the first header ie. "Part No.". Which also means the the width of the data takes the width of the header it corresponds to(just like the top table). Try adding another <td> inside the same table row, you will understand.