I'm writing a website that support arabic language. I'm using bootstrap-tables for my tables, It work very well, but when I change direction to RTL its not working currectly and when I push the table header to resiz it, next table header resize.
html:
<link href="https://unpkg.com/jquery-resizable-columns#0.2.3/dist/jquery.resizableColumns.css" rel="stylesheet">
<link href="https://unpkg.com/bootstrap-table#1.19.1/dist/bootstrap-table.min.css" rel="stylesheet">
<script src="https://unpkg.com/jquery-resizable-columns#0.2.3/dist/jquery.resizableColumns.min.js"></script>
<script src="https://unpkg.com/bootstrap-table#1.19.1/dist/bootstrap-table.min.js"></script>
<script src="https://unpkg.com/bootstrap-table#1.19.1/dist/extensions/resizable/bootstrap-table-resizable.min.js"></script>
<table dir="rtl" data-toggle="table" data-resizable="true">
<thead>
<tr>
<th> th1 </th>
<th> th2 </th>
<th> th3 </th>
</tr>
</thead>
<tbody>
<tr>
<td> td1 </td>
<td> td2 </td>
<td> td3 </td>
</tr>
<tr>
<td> td1 </td>
<td> td2 </td>
<td> td3 </td>
</tr>
<tr>
<td> td1 </td>
<td> td2 </td>
<td> td3 </td>
</tr>
</tbody>
<table>
js:
$(document).ready(function () {
$(function () {
$("#table").resizableColumns();
});
});
As I understand you used bootstrap-table and jquery.resizableColumns to make columns resizable. Bootstrap-table in rtl direction just works fine and it should not have any problem the problem is in jquery.resizableColumns.
To solve this problem you can customize jquery.resizableColumns.js as below:
remove marked
remove purple marked and add green marked
Related
I have an image in google spreadsheet. Pressing the button fires the script which is supposed to open a stylized table. Instead, it opens a table and fails to apply CSS style to it. I read Google documentation on making a separate file for styling and putting an include in the main HTML file as follows
// <?!= include('stylesheet'); ?>
I did this. I get a table with with being a plain text.
How to make the script actually process CSS styles?
gs file:
function include(filename) {
return HtmlService.createHtmlOutputFromFile(filename).getContent();
};
function openDialog() {
var html = HtmlService.createHtmlOutputFromFile('Stundu_laiki')
.setHeight(600);
SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
.showModalDialog(html, 'Stundu laiki')
}
stylesheet.html file with CSS for tables
<style>
.w3-table,.w3-table-all{}.w3-table-all{border:1px solid #ccc}
.w3-table-lined tr:nth-child(odd){background-color:#fff}.w3-table-lined tr:nth-child(even){background-color:#f1f1f1}
.w3-table-all tr:nth-child(odd){background-color:#fff}.w3-table-all tr:nth-child(even){background-color:#f1f1f1}
.w3-bordered tr,.w3-table-all tr{border-bottom:1px solid #ddd}.w3-striped tbody tr:nth-child(even){background-color:#f1f1f1}
</style>
stundu_laiki.html with a table
<!DOCTYPE html>
<html>
<head>
<base target="_top">
**<?!= include('stylesheet'); ?>**
</head>
<body>
<table width="98%" border="1" cellpadding="3px" cellspacing="0" style="w3-table-all">
<tr>
<td width="23%">1.</td>
<td width="77%">8:30 - 9:10</td>
</tr>
<tr>
<td>2.</td>
<td>9:20 - 10:00</td>
</tr>
<tr>
<td>3.</td>
<td>10:10 - 10:50</td>
</tr>
<tr>
<td>4.</td>
<td>11:05 - 11:45</td>
</tr>
<tr>
<td>5.</td>
<td>12:00 - 12:40</td>
</tr>
<tr>
<td>6.</td>
<td>13:10 - 13:50</td>
</tr>
<tr>
<td>7.</td>
<td> 14:00 - 14:40</td>
</tr>
<tr>
<td>8.</td>
<td>14:50 - 15:30</td>
</tr>
<tr>
<td>9.</td>
<td>15:35 - 16:15</td>
</tr>
</table>
<h2> Saīsināto dienu stundu laiki</h2>
<table width="98%" border="1" cellpadding="3px" cellspacing="0" class="w3-table-all">
<tr>
<td width="23%">1.</td>
<td width="77%">8:30 - 9:00</td>
</tr>
<tr>
<td>2.</td>
<td>9:10 - 9:40</td>
</tr>
<tr>
<td>3.</td>
<td>9:50 - 10:20</td>
</tr>
<tr>
<td>4.</td>
<td>10:35 - 11:05</td>
</tr>
<tr>
<td>5.</td>
<td>11:20 - 11:50</td>
</tr>
<tr>
<td>6.</td>
<td>12:20 - 12:50</td>
</tr>
<tr>
<td>7.</td>
<td> 13:00 - 13:30</td>
</tr>
<tr>
<td>8.</td>
<td>13:40 - 14:10</td>
</tr>
<tr>
<td>9.</td>
<td>14:15 - 14:45</td>
</tr>
</table>
</body>
</html>
Use createTemplateFromFile instead then evaluate your html. See final script below.
Final script:
function openDialog() {
var html = HtmlService.createTemplateFromFile('stundu_laiki')
.evaluate()
.setHeight(600);
SpreadsheetApp.getUi() // Or DocumentApp or SlidesApp or FormApp.
.showModalDialog(html, 'Stundu laiki')
}
Output:
Here is the plunk below, I'm trying to push the internal table to the top of the page tried different CSS but it doesn't get aligned to the top.
<td width="30%">
<div>
<h4>Category properties</h4>
<table style=>
<tbody>
<tr>
<td>
Name
</td>
<td>
{{selectedCategory.name}}
</td>
</tr>
<tr>
<td>Source</td>
<td>{{selectedCategory.source}}</td>
</tr>
<tr>
<td>Tenancy</td>
<td>{{selectedCategory.tenancy}}</td>
</tr>
<tr>
<td>Display Name</td>
<td>{{selectedCategory.displayName}}</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</table>
http://plnkr.co/edit/C4vDxt09kmLPUPQNssL4?p=preview
I'm using FOOTABLE to create job board. What I want to add is a checkbox option to select jobs (rows) so users can send cv to multiple jobs at once. Any idea on how to implement this in existing table?
simple example:
<table class="footable toggle-arrow" data-page-size="20" >
<thead>
<tr>
<th><!--select option id col--></th>
<th><span>Job Description</span></th>
<th><span>Area</span></th>
<th><span>Number</span></th>
<th><!--TYPE--></th>
<th><!--SEND--></th>
</tr>
</thead>
<tbody>
<tr><!---JOB-->
<td><input type="checkbox" value="id"></td>
<td>job description value</td>
<td>area value</td>
<td>job number</td>
<td data-value="4566">4566</td>
<td data-value="3"><img title="hot" src="vip.png" /></td>
<td></td>
</tr><!---END JOB-->
</tbody>
Thanks!
Here's a quick example of one way you could do this:
<!DOCTYPE html>
<html>
<head>
<script data-require="jquery#*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<a id="sendSelectedButton" href="#">Send Selected</a>
<table id="theTable">
<thead>
<tr>
<th></th>
<th>Description</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>
<input type="checkbox">
</td>
<td>Job 1</td>
<td>send
</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>Job 2</td>
<td>send
</td>
</tr>
<tr>
<td>
<input type="checkbox">
</td>
<td>Job 3</td>
<td>send
</td>
</tr>
</tbody>
</table>
<script>
function sendRows(rows) {
if (rows === undefined ||
rows === null ||
rows.length === 0)
return;
//Do stuff to send rows here.
}
$(document).ready(function() {
$("#sendSelectedButton").on("click", function() {
var checkRows = $("#theTable").find("tbody tr").has("input:checked");
sendRows(checkRows);
});
$("table").on("click", "tr a", function() {
var row = $(this).parents("tr");
sendRows(row);
});
});
</script>
</body>
</html>
Here's a plunk with the same code: http://plnkr.co/edit/tK4WpCvV7vSjVFmKlJIx
I didn't add any Footable here because it doesn't seem like that Footable will affect it one way or another.
I think you'll find that things quickly get a lot more complex as your application matures. I'd suggest you look some type of data binding. I personally use Knockout.js. Even if you don't decide to use Knockout.js, I think their tutorial is pretty cool. (http://knockoutjs.com/index.html)
I have a asp.net mvc 3 view for printing a table. I would like a printable view pop-up.
The resulting HTML print is compatible/formatted for 8.5x11 paper.
The entire page only contains one table, which possible has many rows. Therefore it has many pages, basically.
Export to pdf is fine.
Should I add CSS or other tricks?
<body>
<table class="ui-widget">
<thead>
<tr>
<td class="ui-widget-content">
ID
</td>
<td class="ui-widget-content">
PIN
</td>
<td class="ui-widget-content">
First Name
</td>
<td class="ui-widget-content">
Middle Name
</td>
<td class="ui-widget-content">
Last Name
</td>
</tr>
</thead>
#foreach (var r in ViewBag.PINS)
{
<tr>
<td class="ui-widget-content">#r.IDNumber
</td>
<td class="ui-widget-content">#r.PIN
</td>
<td class="ui-widget-content">#r.FirstName
</td>
<td class="ui-widget-content">#r.MiddleName
</td>
<td class="ui-widget-content">#r.LastName
</td>
</tr>
}
</table>
Have you thought about a print.css file? You can style the page then to fit on 8.5x11" (this is the easiest and fastest way). If you need it exactly right then you should use a ASP.net PDF export library.
It would be so slick if you could use dojox.grid.DataGrid and dojox.data.HtmlStore together. Maybe there is an easier way to get sortable tables with Dojo, but this is all I can come up with... and it doesn't quite work. There is a DojoCampus example of this but it does not work either! What am I missing?
<html>
<head>
<style type="text/css" media="all">
#import "http://ajax.googleapis.com/ajax/libs/dojo/1.3/dojo/resources/dojo.css";
#import "http://ajax.googleapis.com/ajax/libs/dojo/1.3/dojox/grid/resources/Grid.css";
#import "http://ajax.googleapis.com/ajax/libs/dojo/1.3/dojox/grid/resources/tundraGrid.css";
</style>
<script type="text/javascript">
var djConfig = {parseOnLoad: true};
</script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/dojo/1.3/dojo/dojo.xd.js"></script>
<script type="text/javascript">
dojo.require("dojox.data.HtmlStore");
dojo.require("dojox.grid.DataGrid");
dojo.require('dojo.parser');
</script>
<script type="text/javascript">
var layoutBooks = [[{
field: "isbn",
name: "ISBN",
width: 10
},
{
field: "author",
name: "Author",
width: 10
},
{
field: "title",
name: "Title",
width: 'auto'
}]];
</script>
</head>
<body class=tundra>
<b>
Standard HTML table:
</b>
<br>
<table id="myData2">
<thead>
<tr>
<th>
isbn
</th>
<th>
title
</th>
<th>
author
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
A9B57C
</td>
<td>
Title of 1
</td>
<td>
Author of 1
</td>
</tr>
<tr>
<td>
A9B57F
</td>
<td>
Title of 2
</td>
<td>
Author of 2
</td>
</tr>
<tr>
<td>
A9B577
</td>
<td>
Title of 3
</td>
<td>
Author of 3
</td>
</tr>
<tr>
<td>
A9B574
</td>
<td>
Title of 4
</td>
<td>
Author of 4
</td>
</tr>
<tr>
<td>
A9B5CC
</td>
<td>
Title of 5
</td>
<td>
Author of 5
</td>
</tr>
</tbody>
</table>
<br>
<br>
<b>
dojox.grid.DataGrid connected to the above table:
</b>
<br>
<div dojoType="dojox.data.HtmlStore" dataId="myData2" jsId="gridStore">
</div>
<div style="width: 400px; height: 200px;">
<div id="grid" dojoType="dojox.grid.DataGrid" store="gridStore" structure="layoutBooks"
query="{}" rowsPerPage="40">
</div>
</div>
I think this example doesn't work because of line breaks in your th tags. Try writing ths in one line:
<th>isbn</th>
for sorting the grid you can do grid.setSortIndex(colIndx,isAsc)
1) colIndx is zero based index of the columns of the grid.
2) if isAsc is true that column will be sorted in ascending order.