OK, so I've looked at the getting started examples on the documentation available at: http://mottie.github.io/tablesorter/docs/index.html#Demo
I am trying the to do the basic example provided in the documentation, however my table does not load with the tablesorter features (i.e. the sort icons on the header, or clickable header columns) as the online version demonstrates. What am I doing wrong?...
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Something</title>
<!-- load tableSorter theme -->
<link href="http://mottie.github.io/tablesorter/css/theme.default.css" rel="stylesheet">
<!-- load jQuery and tableSorter scripts -->
<script type="text/javascript" src="./includes//jquery-2.1.0.js"></script>
<script type="text/javascript" src="./includes/tablesorter-master/js/jquery.tablesorter.js"></script>
<!-- load tableSorter widgets -->
<script type="text/javascript" src="./includes/tablesorter-master/js/jquery.tablesorter.widgets.js"></script>
<script type="text/javascropt">
$(document).ready(function(){
$("table").tablesorter({
theme : 'blue',
widgets : ['zebra','columns'],
sortList: [[0,0]],
debug : true,
widthFixed: false,
showProcessing : true
});
});
</script>
</head>
<body>
<table class="tablesorter">
<thead>
<tr>
<th>Last Name</th>
<th>First Name</th>
<th>Email</th>
<th>Due</th>
<th>Web Site</th>
</tr>
</thead>
<tbody>
<tr>
<td>Smith</td>
<td>John</td>
<td>jsmith#gmail.com</td>
<td>$50.00</td>
<td>http://www.jsmith.com</td>
</tr>
<tr>
<td>Bach</td>
<td>Frank</td>
<td>fbach#yahoo.com</td>
<td>$50.00</td>
<td>http://www.frank.com</td>
</tr>
<tr>
<td>Doe</td>
<td>Jason</td>
<td>jdoe#hotmail.com</td>
<td>$100.00</td>
<td>http://www.jdoe.com</td>
</tr>
<tr>
<td>Conway</td>
<td>Tim</td>
<td>tconway#earthlink.net</td>
<td>$50.00</td>
<td>http://www.timconway.com</td>
</tr>
</tbody>
</table>
</body>
</html>
It looks like the theme option is not being set. When you initialize tablesorter without any options:
$("#myTable").tablesorter();
The "default" theme is set, so make sure to include the "theme.default.css" file; but since it looks like you are loading the "blue" theme stylesheet, initialize the plugin as follows:
<script type="text/javascropt">
$(function(){
$("#myTable").tablesorter({
theme: "blue"
});
});
</script>
Now, from looking at the blue theme file name, it appears that it might be the original blue theme meant for tablesorter v2.0.5 ("/blue/style.css"). I would venture to guess that the tablesorter being used here is from my fork of tablesorter, so make sure to load the file named "theme.default.css".
Related
I'm quite new in grails. I'm creating an SMS send module for my project. Here I'm getting some contact number from the user and displaying it inside a dynamically created 'TD' value. Now I want to pass this 'TD' values as a list to my controller.
def controller(){
def var = params.name
}
won't work here as it's not a field value.
Get all table td into array comma separated contact numbers.
Both ways added in the below code. First, where the contact number is last column. And the second, where all td value have class name.
// First way
var contactNumbers= []
$("#example tbody tr").each(function() {
contactNumbers.push($(this).find("td:last-child").html());
});
console.log("If Contact number column is on last"+contactNumbers.join())
// Second way
var contactNumbers1= []
$(".cnTd").each(function(i){
contactNumbers1.push($(this).text())
})
console.log("Contact numbers by class"+contactNumbers1.join())
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<table class="table" id="example">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
<th>Contact Number</th>
</tr>
</thead>
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
<td class="cnTd">5675677567</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
<td>90987786756</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
<td>3455657457</td>
</tr>
</tbody>
</table>
</div>
Now you you send the collected values to controller using hidden form value or by sending ajax request or by query params. At contoller side simply use split(',') or tokenize(',') method to get list of numbers.
Hope this will helps you.
I was using a trial version of kendo grid then after the license expired my employer bought it so i was able to download (they gave access to my account - employer's account is separate)
telerik.kendoui.professional.2016.3.1118.commercial.msi
Now the problem is this is still not working, I have done the following steps to install kendo grid
I have run this installer, and have also manually added to my asp.net-mvc application
js folder under my application's Scripts/kendo folder
css files (styles folder) under my application's Content/kendo folder
My code
#Scripts.Render("~/Scripts/kendo/jquery.min.js")
#Scripts.Render("~/Scripts/jquery.unobtrusive-ajax.min.js")
#Scripts.Render("~/Scripts/kendo/kendo.all.min.js")
#Styles.Render("~/Content/kendo/kendo.common.min.css")
#Styles.Render("~/Content/kendo/kendo.default.min.css")
<script type="text/javascript">
//shorter version of document.ready
$(function () {
//kendo.ui.Grid
$("#grid").kendoGrid(
{
sortable: true,
dataSource: {
pageSize: 1
},
pageable:true,
resizable: true,
columnMenu: true,
scrollable:true
}
);
});
</script>
<div id="examplegrid">
<table id="grid">
<colgroup>
<col />
<col />
<col style="width:110px" />
<col style="width:120px" />
<col style="width:130px" />
</colgroup>
<thead>
<tr>
<th data-field="make">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>
</tbody>
</table>
My browser does not have any errors. But i cannot see a kendo grid there.
get support it says you are not licensed for any products (which is confusing because i downloaded the commercial version from there)
I have also posted this to their forums (from my employer's account) but it takes them at least 3 days to respond!!
Page Source snap shot
I am also adding view source code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>About - My ASP.NET MVC Application</title>
<link href="/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<meta name="viewport" content="width=device-width" />
<link href="/Content/site.css" rel="stylesheet"/>
<script src="/Scripts/modernizr-2.6.2.js"></script>
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">your logo here</p>
</div>
<div class="float-right">
<section id="login">
<ul>
<li>Register</li>
<li>Log in</li>
</ul>
</section>
<nav>
<ul id="menu">
<li>Home</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
</div>
</div>
</header>
<div id="body">
<section class="content-wrapper main-content clear-fix">
<script src="/Scripts/kendo/jquery.min.js"></script>
<script src="/Scripts/jquery.unobtrusive-ajax.min.js"></script>
<link href="/Content/kendo/kendo.common.min.css" rel="stylesheet"/>
<link href="/Content/kendo/kendo.bootstrap.min.css" rel="stylesheet"/>
<link href="/Content/kendo/kendo.default.min.css" rel="stylesheet"/>
<script src="/Scripts/kendo/kendo.all.min.js"></script>
UPDATE
When i re-opened visual studion it gave me option to update my telerik version which i said yes and it showed me the following screen.
After all this grid is still the same - without kendo-grid skin :S
UPDATE
I read this topic Widgets Are Unavailable or Undefined
So i removed a redundant jquery reference and now the grid looks like the attached image.
Note: this was a separate test appication and i intend to incorporate this grid into my main application. Now the grid looks like this
I found my answer from Bundle of Kendo UI is not working in IIS
So as soon as i renamed the bundle
bundles.Add(new StyleBundle("~/Content/kendo").Include(...));
To
bundles.Add(new StyleBundle("~/Content/kendoui").Include(...));
It worked great!
I have an html table with rowspan/colspan.I am using jspdf and jspdf-autotable for exporting that html table to pdf. However the pdf getting saved has a table which doesn't contain rowspan/colspan in actual table.How to do colspan/rowspan using jspdf-autotable?
My current code is
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title id='title'>HTML Page setup Tutorial</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.0.272/jspdf.debug.js"></script>
<script src="https://rawgit.com/someatoms/jsPDF-AutoTable/master/dist/jspdf.plugin.autotable.js"></script>
<script type="text/javascript">
function myFunction()
{
var doc = new jsPDF('p', 'pt');
var res = doc.autoTableHtmlToJson(document.getElementById("my-table"));
doc.autoTable(res.columns, res.data, {startY: 40});
doc.save("Report.pdf");
}
</script>
</head>
<body>
<table border='1' id="my-table">
<thead>
<tr>
<th>A</th>
<th>B</th>
<th>C</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan='2'>D</td>
<td colspan='2'>$100</td>
</tr>
<tr>
<td >E</td>
<td >F</td>
</tr>
</tbody>
</table>
<button type="button" onclick="myFunction()">Click Me!</button>
</body>
</html>
EDIT: Version 3 of the library supports rowspans and colspans, no hacks needed
The plugin doesn't support to automatically port colspans and rowspans from html. However you can do it manually. Check out this example (a demo is here).
In the meantime the plugin seems to support parsing the colspans from HTML. This should work:
<td colspan="2">Colspan</td>
I'm beginning a web app using Materialize CSS v0.97, jQuery Mobile v1.4.5, and jQuery v2.1.4.
I'm trying to use the mobile collapse tutorial to have a navbar in the jQuery Mobile header, which on mobile devices changes to a hamburger button with the menu appearing when clicked.
When I resize my browser (Chrome, latest on Mac v10.11) to mobile size, the hamburger appears but clicking or hovering or anything does not make the menu appear.
The only thing I have changed was commenting out a line in jQuery Mobile JS because of this post about how to fix the Chrome security warning.
Could that be why the nav bar isn't working? My site doesn't load at all with the below code because of that warning, so I have everything js and css saved locally with relative links to them. But this snippet worked in the snippet preview...
$( document ).ready(function(){
$(".button-collapse").sideNav();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<link href="https://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.97.0/css/materialize.min.css" rel="stylesheet"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<body>
<div data-role="page" id="home">
<div data-role="header">
<nav>
<div class="nav-wrapper">
Logo
<i class="material-icons">menu</i>
<ul class="right hide-on-med-and-down">
<li>Sass</li>
<li>Components</li>
<li>Javascript</li>
<li>Mobile</li>
</ul>
<ul class="side-nav" id="mobile-demo">
<li>Sass</li>
<li>Components</li>
<li>Javascript</li>
<li>Mobile</li>
</ul>
</div>
</nav>
</div>
<!-- /header -->
<div role="main" class="ui-content">
<table class="centered">
<thead>
<tr>
<th data-field="collection">Collection</th>
<th data-field="description"></th>
<th data-field="progress"></th>
<th data-field="link"></th>
</tr>
</thead>
<tbody>
<tr>
<td>Stuff 1</td>
<td>Description of things in Stuff 1. Stuff 1 is really great, ya know? So much stuff in it.</td>
<td></td>
<td><i class="material-icons">chevron_right</i></td>
</tr>
<tr>
<td>Stuff 2</td>
<td>Description of things in Stuff 2. Stuff 2 is really great, ya know? So much stuff in it.</td>
<td></td>
<td><i class="material-icons">chevron_right</i></td>
</tr>
<tr>
<td>Stuff 3</td>
<td>Description of things in Stuff 3. Stuff 3 is really great, ya know? So much stuff in it.</td>
<td></td>
<td><i class="material-icons">chevron_right</i></td>
</tr>
</tbody>
</table>
</div>
<!-- /content -->
</div>
<!-- /page -->
</body>
Such is life -- as soon as I complain, the next thing I try works.
I kept the above code and only changed the jQuery Mobile import to point to the local, edited version, and now it runs in Chrome and the menu works.
Most likely something's messed up with me localizing the rest of the dependancies, but for now I'm good.
I am new to groovy and grails, hence this simple doubt. I have a map like this: [0:[A,B,C,D], 1:[a,b,c,d]]. I want to display it as follows: A: aB:bC:cD:d How do you display the data column wise? The .gsp I have now is shown below and all it does is display the values row wise.
<!DOCTYPE html>
<html>
<head>
<meta name="layout" content="main">
<title>Parsed Map</title>
</head>
<body>
<table>
<g:each in="${myMap}" var="element">
<tr>
<g:each in="${element.value }" >
<th>${it}</th>
</g:each>
</tr>
</g:each>
</table>
</body>
</html>
Pointing me in right direction for understanding maps in groovy will also be appreciated. Thank you.
Assuming that you have already validated that the columns and header lists have the same number of elements, you could do something like this...
<html>
<head>
<meta name="layout" content="main">
<title>Parsed Map</title>
</head>
<body>
<table>
<g:each var="heading" in="${headings}" status="counter">
<tr>
<th>${heading}</th>
<td>${values[counter]}</td>
</tr>
</g:each>
</table>
</body>
</html>
I assume your example is a simplified version of your real problem. Depending on what you are really trying to do, you have a number of options. A simple thing might be like this (organize the table however you like, but this should give you the idea...):
// grails-app/controllers/com/demo/DemoController.groovy
package com.demo
class DemoController {
def index() {
// presumably you got this Map from somewhere and it isn't hardcoded here
def someMap = [0:['A', 'B', 'C', 'D'], 1:['a', 'b', 'c', 'd']]
def headings = someMap[0]
def values = someMap[1]
[headings: headings, values: values]
}
}
// grails-app/views/demo/index.gsp
<html>
<head>
<meta name="layout" content="main">
<title>Parsed Map</title>
</head>
<body>
<table>
<tr>
<g:each var="heading" in="${headings}">
<th>${heading}</th>
</g:each>
</tr>
<tr>
<g:each var="value" in="${values}">
<th>${value}</th>
</g:each>
</tr>
</table>
</body>
</html>