I am looking for a very simple data grid plugin for jquery that will allow me to do the following
populate it
order columns a->z and z->a
add rows on the client
I am using asp.net mvc on the server side.
DataTables is pretty straightforward and easily configurable:
http://datatables.net/
Their examples page lists a number of ready to go implementations.
I've been working with jquery.tablesorter. API is pretty clear; you can override the sorting function to provide custom sorting. In this example, notice that i have a grouping header as well, for which I can disable sorting.
<div style="width: 1024px; overflow: scroll">
<table id="myTable" class="tablesorter">
<thead>
<tr>
<th colspan="2">Skill</th>
<th colspan="2">Resource</th>
<th colspan="2">Project</th>
<th>Role</th>
</tr>
<tr>
<th>Skill</th>
<th>Complexity</th>
<th>Bill</th>
<th>Joe</th>
<th>Project 1</th>
<th>Project 2</th>
<th>Role 1</th>
</tr>
</thead>
<tbody>
<tr>
<td>.Net</td>
<td>2</td>
<td>1</td>
<td>3</td>
<td>4</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>UX</td>
<td>3</td>
<td>1</td>
<td>2</td>
<td>1</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>WCF</td>
<td>3</td>
<td>4</td>
<td>1</td>
<td>3</td>
<td>2</td>
<td>2</td>
</tr>
</tbody>
</table>
(function ($) {
$(document).ready(function () {
$("#myTable").tablesorter({
headers: {
0: { sorter: false },
1: { sorter: false },
2: { sorter: false },
3: { sorter: false }
}
});
});
})(jQuery);
jqGrid is probably the best grid plugin out there, it should do all you need above, and provide ample room for growth down the road if needed.
http://www.trirand.com/blog/
jsGrid is a really lightweight and customizable jQuery grid plugin http://js-grid.com/
Related
There is not many useful examples with jQuery jscroll and it is a fact it doesn't work with table rows by default because it puts the results into a div element which screws up the table.
I had this HTML template
<table class="table responsive-table-list">
<thead>
<tr>
<th>label 1</th>
<th>label 2</th>
<th>label 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>data 1.1</td>
<td>data 1.2</td>
<td>data 1.3</td>
</tr>
<tr>
<td>data 2.1</td>
<td>data 2.2</td>
<td>data 2.3</td>
</tr>
<tbody>
</table>
How can I make it jScrollable?
You need your own controller which provides the data. This is not part of this solution. The output in this case has to be HTML and has to contain the next X rows of the table.
The HTML template wrapped with an extra div. The next page link (pointing to the controller) is added as a new row. jscroll will remove the A and the TD tags but will not remove the TR as it is not aware of it. We have to do it later otherwise the empty TR tags break the HTML.
I pass the auto-trigger and the loading-html in the data argument which I can access from the javascript code.
I use nextPageLoad class in the A tag which helps me to recognize the jscroll related link.
<div class="jscroll" data-auto-trigger="true" data-loading-html="Loading..">
<table class="table responsive-table-list">
<thead>
<tr>
<th>label 1</th>
<th>label 2</th>
<th>label 3</th>
</tr>
</thead>
<tbody>
<tr>
<td>data 1.1</td>
<td>data 1.2</td>
<td>data 1.3</td>
</tr>
<tr>
<td>data 2.1</td>
<td>data 2.2</td>
<td>data 2.3</td>
</tr>
<tr>
<td colspan="3">
Next page
</td>
</tr>
<tbody>
</table>
</div>
the javascript code. The debug is activated!
var EndlessScroll = (function ($) {
function init() {
var $scrollEl = $('.jscroll');
var autoTrigger = $scrollEl.data('auto-trigger');
var loadingHtml = $('<span>');
loadingHtml.text($scrollEl.data('loading-html'));
$scrollEl.jscroll({
loadingHtml: loadingHtml[0].outerHTML,
padding: 20,
autoTrigger: autoTrigger,
nextSelector: '.nextPageLoad',
callback: function (data) {
var $table = $('.jscroll table tbody');
// moves the new elements from the jscroll div to the table
$('.jscroll-added tr').appendTo($table);
// removes the empty tr encapsulated the jscroll pagination
var rows = $table.find('tr');
rows.each(function(idx, el){
if ($(el).children().length === 0) {
$(el).remove();
}
});
},
debug: true
});
}
return {
init: init
};
})(jQuery);
$(EndlessScroll.init);
I am new to Thymeleaf and trying to create a dynamic table on Themeleaf template.
How can I do it..??
I have been googling by I didn't got any proper answer. The issue is I cannot iterate List< Map< String,Object >>. I can have any number of columns and columns name could be any thing.
<tr class="headings">
<th class="column-title">ID</th>
<th class="column-title">Name</th>
<th class="column-title">Salary</th>
<th class="column-title">Status</th>
</tr>
</thead>
<tbody>
<tr class="even pointer" th:each="row:${rows}" id = "tablerow">
<td class=" " th:text="${row.getId()}">Id</td>
<td class=" " th:text="${row.getName()}">Name</td>
<td class=" " th:utext="${row.getSalary()}">Salary</td>
<td class=" " th:text="${row.getStatus()}">Active</td>
</tr>
</tbody>
I need to set values dynamically since if query of result will keep changing . right now column name are hard coded and value are also getting by row.getId what if there is no Id, it could be anything in rows what shall I use than..? example row.<>.
rows is obtained as List< Map< String, Object>>.
Thanks in advance.
You can iterative over a Map just as easily as you can a List. The simplest form of this would be:
<tbody>
<tr class="even pointer" th:each="row: ${rows}" id="tablerow">
<td th:each="field: ${row}" th:text="${field.value}" />
</tr>
</tbody>
However, since Maps don't have a specific ordering (unless you're using something like a TreeMap), the way I would do it would be something like this (complete example should match your example table):
Controller
List<String> headers = Arrays.asList("ID", "Name", "Salary", "Status");
List<Map<String, Object>> rows = new ArrayList<>();
rows.add(Map.of("ID", "1", "Name", "Jim", "Salary", "50000", "Status", "active"));
rows.add(Map.of("ID", "2", "Name", "Sally", "Salary", "50000", "Status", "inactive"));
Template
<table>
<thead>
<tr class="headings">
<th th:each="header: ${headers}" class="column-title" th:text="${header}" />
</tr>
</thead>
<tbody>
<tr class="even pointer" th:each="row: ${rows}" id="tablerow">
<td th:each="header: ${headers}" th:text="${row.get(header)}" />
</tr>
</tbody>
</table>
Which will produce:
<table>
<thead>
<tr class="headings">
<th class="column-title" >ID</th>
<th class="column-title" >Name</th>
<th class="column-title" >Salary</th>
<th class="column-title" >Status</th>
</tr>
</thead>
<tbody>
<tr class="even pointer" id="tablerow">
<td >1</td>
<td >Jim</td>
<td >50000</td>
<td >active</td>
</tr>
<tr class="even pointer" id="tablerow">
<td >2</td>
<td >Sally</td>
<td >50000</td>
<td >inactive</td>
</tr>
</tbody>
</table>
Laravel Snappy works great, but trying to fix this
The headers are good, but the table itself is not splitting and starting underneath the headers of the second page. Is this fixable? I am using the adminLTE theme.
Seen this page, but this does not solve it for me: https://github.com/wkhtmltopdf/wkhtmltopdf/issues/2367
Current code:
<table class="table table-striped table-bordered tree">
<thead>
<tr>
<th></th>
<th>Cables</th>
<th>Customer</th>
<th>Supplier</th>
<th>Load in</th>
<th>Load out</th>
<th>Info</th>
</tr>
</thead>
<tbody>
<tr>
<td>some data</td>
<td>some data</td>
<td>some data</td>
<td>some data</td>
<td>some data</td>
<td>some data</td>
<td>some data</td>
</tr>
</tbody>
</table>
.tree {
page-break-inside: avoid;
}
add this code in style. Hope that will be work
.page-break {
page-break-after: always;
}
.page-break:last-child {
page-break-after: avoid;
}
$(document).ready(function() {
$("#grid").kendoGrid({
height: 550,
sortable: true
});
});
<link href="http://kendo.cdn.telerik.com/2014.1.318/styles/kendo.common.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2014.1.318/js/kendo.all.min.js"></script>
<div id="example">
<table id="grid">
<colgroup>
<col />
<col />
<col />
<col />
<col />
</colgroup>
<thead>
<tr>
<th data-field="make" data-hidden="true">Car Make</th>
<th data-field="model">Car Model</th>
<th data-field="year">Year</th>
<th data-field="category">Category</th>
<th data-field="airconditioner">Air Conditioner</th>
</tr>
</thead>
<tbody>
<tr>
<td>Volvo</td>
<td>S60</td>
<td>2010</td>
<td>Saloon</td>
<td>Yes</td>
</tr>
<tr>
<td>Audi</td>
<td>A4</td>
<td>2002</td>
<td>Saloon</td>
<td>Yes</td>
</tr>
<tr>
<td>BMW</td>
<td>535d</td>
<td>2006</td>
<td>Saloon</td>
<td>Yes</td>
</tr>
<tr>
<td>BMW</td>
<td>320d</td>
<td>2006</td>
<td>Saloon</td>
<td>No</td>
</tr>
<tr>
<td>VW</td>
<td>Passat</td>
<td>2007</td>
<td>Saloon</td>
<td>No</td>
</tr>
<tr>
<td>VW</td>
<td>Passat</td>
<td>2008</td>
<td>Saloon</td>
<td>Yes</td>
</tr>
<tr>
<td>Peugeot</td>
<td>407</td>
<td>2006</td>
<td>Saloon</td>
<td>Yes</td>
</tr>
<tr>
<td>Honda</td>
<td>Accord</td>
<td>2008</td>
<td>Saloon</td>
<td>No</td>
</tr>
<tr>
<td>Alfa Romeo</td>
<td>159</td>
<td>2008</td>
<td>Saloon</td>
<td>No</td>
</tr>
<tr>
<td>Nissan</td>
<td>Almera</td>
<td>2001</td>
<td>Saloon</td>
<td>Yes</td>
</tr>
<tr>
<td>Mitsubishi</td>
<td>Lancer</td>
<td>2008</td>
<td>Saloon</td>
<td>Yes</td>
</tr>
<tr>
<td>Opel</td>
<td>Vectra</td>
<td>2008</td>
<td>Saloon</td>
<td>Yes</td>
</tr>
<tr>
<td>Toyota</td>
<td>Avensis</td>
<td>2006</td>
<td>Saloon</td>
<td>No</td>
</tr>
<tr>
<td>Toyota</td>
<td>Avensis</td>
<td>2008</td>
<td>Saloon</td>
<td>Yes</td>
</tr>
<tr>
<td>Toyota</td>
<td>Avensis</td>
<td>2008</td>
<td>Saloon</td>
<td>Yes</td>
</tr>
<tr>
<td>Audi</td>
<td>Q7</td>
<td>2007</td>
<td>SUV</td>
<td>Yes</td>
</tr>
<tr>
<td>Hyundai</td>
<td>Santa Fe</td>
<td>2012</td>
<td>SUV</td>
<td>Yes</td>
</tr>
<tr>
<td>Hyundai</td>
<td>Santa Fe</td>
<td>2013</td>
<td>SUV</td>
<td>Yes</td>
</tr>
<tr>
<td>Nissan</td>
<td>Qashqai</td>
<td>2007</td>
<td>SUV</td>
<td>Yes</td>
</tr>
<tr>
<td>Mercedez</td>
<td>B Class</td>
<td>2007</td>
<td>Hatchback</td>
<td>Yes</td>
</tr>
<tr>
<td>Lancia</td>
<td>Ypsilon</td>
<td>2006</td>
<td>Hatchback</td>
<td>Yes</td>
</tr>
</tbody>
</table>
</div>
Initializing from HTML table, how can I specify a column to be hidden? I need to access the data for that column in JS, but don't want to have that data visible to the end user.
http://demos.telerik.com/kendo-ui/grid/from-table
I've tried to use the attribute: data-hidden="true" on the th tag (data-field is also on th tag, as it is in the demo), but it's not working.
Note, I'd like to be able to specify the hidden option as an html attribute, if possible.
unfortunately you can't use the attribute hidden when initializing from an HTML table:
http://docs.telerik.com/kendo-ui/web/grid/introduction#create-a-grid-from-an-existing-html-table
Relevant quote:
When creating the Grid from an existing table, the following column
settings can be defined via HTML attributes:
data field names via data-field attributes
column widths via width styles applied to the respective elements
define data type via data-type attributes
define a column template via data-template attributes
enable or disable the column menu via data-menu attributes
enable or disable sorting via data-sortable attributes
enable or disable filtering via data-filterable attributes
enable or disable grouping via data-groupable attributes
All attributes should be applied to the <th> elements, except the column width styles.
All other column-related settings cannot be defined via HTML attributes in the <table>. If such settings must be used (e.g. commands, locking, editors, etc.) then the above attribute configuration should be abandoned and all settings should be included in the Grid's Javascript initialization statement (when using declarative widget initialization, the column properties should be set via the data-columns attribute).
For more info on that:
http://www.telerik.com/blogs/mvvm_declarative_initialization_and_html5_data_attributes
This is a good overview of declarative initiation in kendo.
http://www.telerik.com/forums/declarative-initialization-of-the-kendo-ui-grid
This post is a good example of declaritive initialization specific to grids
With that being said, Here's a quick and dirty workaround if you are seriously married to the plain old HTML format (this would allow you to set hidden via a data attribute, rather than hiding individual columns--which may or may not be important to you):
$(document).ready(function() {
var columns = $('#grid th'),
grid = $("#grid").kendoGrid({
height: 550,
sortable: true
}).data("kendoGrid");
for(var i =0; i < columns.length; i++){
if($(columns[i]).data("hidden") === true){
grid.hideColumn($(columns[i]).data("field"));
}
}
});
http://jsbin.com/mapadu/edit?html,js,output
You can hide column after the initialization of the widget. using the data field string
<script>
$(document).ready(function() {
$("#grid").kendoGrid({
height: 550,
sortable: true
});
var grid = $("#grid").data("kendoGrid");
grid.hideColumn("airconditioner");
});
</script>
Here is a working demo, but user can always check the source of the page and view the data because this only set the style of the <td> to display:none
I'm building a mobile real estate website for my wife's business using Tablesorter to sort by price. It works fine for 6 digit numbers (including $s and commas), e.g. $600,000. However it fails when confronting a 7 digit number, e.g. $1,295,000.
In my
<script type="text/javascript" id="js">$(document).ready(function() {
$("table").tablesorter({
// sort on the second column, order asc
sortList: [[1,0]],
headers: {
1: { sorter: 'digit' } // column number, type
}
});
});
<table cellspacing="2" class="tablesorter { 0: { sorter: false}, 1: {sorter: true} }">
<thead>
<tr>
<th width="158" class="headerempty">Property</th>
<th width="130" class="{'sorter':'currency'}">Sort by Price</th>
</tr>
</thead>
<tbody>
<tr class="odd">
<td><img src="../sales/29 Laurel Way/prepped_images/29lw-for_mobile.jpg" title="Tap for Details" alt="29 Laurel Way" width="150" height="100" border="0"></td>
<td class="{'sorter':'currency'}">$329,000</td>
</tr>
<tr class="odd">
<td><img src="../sales/Aetna Lane/al_for_Mobile.jpg" width="150" height="100"></td>
<td class="{'sorter':'currency'}">$175,000</td>
</tr>
<tr class="odd">
<td><img src="../sales/Atop Smith Hill/prepped/ash_mobile.jpg" width="150" height="100"></td>
<td class="{'sorter':'currency'}">$1,295,000</td>
</tr>
<tr class="odd">
<td><img src="../sales/Beech Hill/bh_mobile.jpg" width="150" height="100"></td>
<td class="{'sorter':'currency'}">$595,000</td>
</tr>
<tr class="odd">
<td class="{'sorter':'currency'}"><img src="../sales/Bluefield/b_mobile.jpg" width="150" height="100"></td>
<td>$299,000</td>
</tr>
</tbody>
</table>
Any thoughts on solving this one? Many thanks in advance, clpix
Constructions like td class="{'sorter':'currency'}" make me scary. You probaly should define table with class sortable and init table sorted in JS using this class, and define sorting parameters in constructor:
$(".sortable").tablesorter({
// sort on the second column, order asc
sortList: [[1,0]],
headers: {
1: { sorter: 'currency' } // column number, type
}
});
<table class='sortable'>
<tr>
<td>$1.000.000</td>
</tr>
......
</table>
And check out delimeter . or ,
This code work fine.