It's my first time to develop a website using OctoberCMS and I'm loving it so far. I want to integrate the Datatables like this but it doesn't work for some reason. The styling doesn't even apply to the table. I was trying my luck to find a tutorial but cannot find any over the internet. Thanks in advance!
<script type="text/javascript" charset="utf8" src="https://cdn.datatables.net/1.10.23/js/jquery.dataTables.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.23/css/jquery.dataTables.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>
<table id="table_id" class="display">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1 Data 1</td>
<td>Row 1 Data 2</td>
</tr>
<tr>
<td>Row 2 Data 1</td>
<td>Row 2 Data 2</td>
</tr>
</tbody>
</table>
<script type="text/javascript">
$(document).ready( function () {
$('#table_id').DataTable();
} );
</script>
Related
Good evening, everyone,
I have a vue-template which should generate a table. The table header, more precisely the number of individual column headers can be determined dynamically via the "slots".
Unfortunately there is always the error that there can only be one root element.
How can I - as easy as possible - make sure that my components are inserted into the header anyway.
table.vue
<template>
<table>
<thead>
<tr>
<slot></slot>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
</tbody>
</table>
</template>
And this ist how i would like to use it:
<lbtable>
<th>Column 1</th>
<th>Column 2</th>
</lbtable>
Here the error-message: Cannot use slot as component root element because it may contain multiple nodes.
Edit:
Here you can find the example:
https://codesandbox.io/s/small-waterfall-k6fit
Try this! You just need to wrap <th> with <template> tag.
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<lbtable>
<template>
<th>Column 1</th>
<th>Column 2</th>
</template>
</lbtable>
</div>
</body>
</html>
<script>
Vue.component('lbtable', {
'template': `
<div>
<table border="1">
<thead>
<tr>
<slot></slot>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
</tr>
</tbody>
</table>
</div>`});
new Vue({
el: "#app"
});
</script>
In Pandas and Seaborn we can create beautiful graphical displays. However sometimes the best thing to show are numbers, for example in a data frame or pivot table.
Are there tools available to generate a similarly attractive display of numbers? (Yes, I suppose I can export to word or excel but that would have been true for beautiful graphs too...)
I'd say it depends on your definition of attractive, but one can make simple clean looking tables from pandas using the pandas.DataFrame.to_html() function. Combine this with custom CSS, or Bootstrap CSS as below, and the results are decent.
import pandas as pd
sample_df = pd.DataFrame({'Column A': [1,2,3,4,5], 'Column B': [5,4,3,2,1], 'Column C': [100,200,300,400,500]})
with open('test_table.html', 'w') as f:
f.write(sample_df.to_html())
Then simply edit the output html with some CSS, in this case Bootstrap.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row mt-5">
<div class="col">
<table class="table table-striped">
<thead>
<tr>
<th></th>
<th>Column A</th>
<th>Column B</th>
<th>Column C</th>
</tr>
</thead>
<tbody>
<tr>
<th>0</th>
<td>1</td>
<td>5</td>
<td>100</td>
</tr>
<tr>
<th>1</th>
<td>2</td>
<td>4</td>
<td>200</td>
</tr>
<tr>
<th>2</th>
<td>3</td>
<td>3</td>
<td>300</td>
</tr>
<tr>
<th>3</th>
<td>4</td>
<td>2</td>
<td>400</td>
</tr>
<tr>
<th>4</th>
<td>5</td>
<td>1</td>
<td>500</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
Resulting in something simple looking like this:
Which could be saved to PDF etc.
I am trying to use the DataTable plugin to add functionality to my html table. I followed the steps for installation and initialization from datatables.net, but it is not adding any functionality to my html page. I am wondering if it is because my table is formatted in a way that isn't supported by the plug-in.
<html>
<head>
<link href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script>
$(document).ready(function() {
$('#example').DataTable();
}
);
</script>
</head>
<body>
<table id="example" class="display" cellspacing="0" width="100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office</th>
<th>Age</th>
<th>Start date</th>
<th>Salary</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td>$320,800</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td>$170,750</td>
</tr>
<tr>
<td>Michael Bruce</td>
<td>Javascript Developer</td>
<td>Singapore</td>
<td>29</td>
<td>2011/06/27</td>
<td>$183,000</td>
</tr>
<tr>
<td>Donna Snider</td>
<td>Customer Support</td>
<td>New York</td>
<td>27</td>
<td>2011/01/25</td>
<td>$112,000</td>
</tr>
</tbody>
</table>
</body>
</html>
Your problem is that you are loading the dataTable.js before jQuery. (you can see the problem in the webconsole of your browser (usually, when typing F12). Loading jQuery before will solve your problem:
<!-- first jQuery -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- then dataTables -->
<link href="https://cdn.datatables.net/1.10.13/css/jquery.dataTables.min.css" rel="stylesheet" type="text/css" />
<script src="https://cdn.datatables.net/1.10.13/js/jquery.dataTables.min.js"></script>
<script>
$(document).ready(function() {
$('#example').DataTable();
}
);
</script>
below is the html code
<html dir="ltr" __expr-val-dir="ltr" xmlns:o="urn:schemas-microsoft-com:office:office">
<head>
<body onload="javascript:if (typeof(_spBodyOnLoadWrapper) != 'undefined') _spBodyOnLoadWrapper();" scroll="yes">
<form id="aspnetForm" onsubmit="javascript:return WebForm_OnSubmit();" action="/Lists/Bedrifter/NewForm.aspx?RootFolder=%2FLists %2FBedrifter&ContentTypeId=0x010089708C9D4BD6934C8E5AAD8CA5960372&Source=http%3A%2F%2Fbrbaker%2Eiqubes%2Ecom%2FLists%2FBedrifter %2FAllItems%2Easpx" method="post" name="aspnetForm">
<div>
<script type="text/javascript">
<script type="text/javascript" src="/WebResource.axd?d=4d6EoZshmx02OmMScHE3DbHlrYbV8g3RhGO1crQQDRnSnV0ocSltu- h2JR6NPXUrSq6UdfWCYI3o0DJF_ZfaK3a8coA1&t=634605546709717464">
<script>
<script language="JavaScript" type="text/JavaScript">
<script src="/_layouts/datepicker.js" language="javascript">
<script language="javascript">
<script language="javascript">
<script type="text/javascript">
<script type="text/javascript" src="/ScriptResource.axd?d=Lim-50lYe1ZDrlX4mMFL650sLf8k9DOdc77CA32d5iqCcwZgC0o44-JDQvjWVdOvFNhnh9Rv8ET6IZprG0J0- hy3RwAt6a8wzZYDlicHIDUEUV3EM6jVmf-3rAG4gzDt7vMtWA2&t=ffffffffe0ec361c">
<script type="text/javascript" src="/ScriptResource.axd?d=kzC4QkzPw8VSUFfZJOZJBiUuRCJh8hH4jceOz-aS9SoZHjrHyO0- qLxFSc_CZdZWHipnmUwdugwDjjJUVkJPeY6Lu2n5NvmKbB5lpZ-yM3GAfcBKWP54a0try64gthczZoxjy1sDHJib8zf8iHnFyopgObE1&t=23ac280b">
<script type="text/javascript" src="/ScriptResource.axd?d=Glp6MnJF7a1dHB7t8aIwFln7LYIjT8Kl_yKq1264_-9QdU3Y7jwHZhcKumPfVlZ3bLuoCPjTZgTerzZfJQex- 7jEIxOZZewN1qSYBhLI3WDJOu1cpD5txPFEu4or9SHjqQ-3ZCDMbq-5NF6lo2Fvf-OSqgUnrMwO8kWZBqN8GlLP10qd0&t=23ac280b">
<script type="text/javascript" src="/WebResource.axd?d=xYoo8lVwQo4Vp8QZN5OAU9ZNIsutUO_7HeMk_xB4mc0J5qXChkZyGSQUm- GEsHBbkeAr07Gg56nkgPJwAT9UisVxGYs1&t=634605546709717464">
<script type="text/javascript">
<div>
<script type="text/javascript">
<table class="ms-iqubes-body" width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="ms-globalbreadcrumb" colspan="4">
<td width="3%" valign="middle" style="padding-left:3px; padding-right:6px;">
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<tr>
<tr height="100%">
<td>
<table class="iqubes-background" width="100%" height="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<tr>
<td id="LeftNavigationAreaCell" class="ms-leftareacell" valign="top" height="100%">
<td>
<td class="ms-bodyareacell" valign="top">
<placeholder id="ctl00_MSO_ContentDiv">
<table id="MSO_ContentTable" class="ms-propertysheet" width="100%" height="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="ms-bodyareaframe" valign="top" height="100%">
<a name="mainContent"></a>
<script type="text/javascript" language="javascript">
<table id="onetIDListForm" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td id="MSOZoneCell_WebPartWPQ5" valign="top">
<table width="100%" border="0" cellspacing="0" cellpadding="0" toplevel="">
<tbody>
<tr>
<td valign="top">
<div id="WebPartWPQ5" style="" allowdelete="false" width="100%" haspers="false" webpartid="bac1b910-309d-4e46-47b4-0b8a052b0579">
<span id="part1">
<table id="ctl00_m_g_bac1b910_309d_4e46_47b4_0b8a052b0579_ctl00_toolBarTbltop" class="ms-formtoolbar" width="100%" border="0" cellspacing="0" cellpadding="2">
<table id="ctl00_m_g_bac1b910_309d_4e46_47b4_0b8a052b0579_ctl00_ctl01_ctl00_toolBarTbl" class="ms-toolbar" width="100%" border="0" cellspacing="0" cellpadding="2">
<table class="ms-formtable" width="100%" border="0" cellspacing="0" cellpadding="0" style="margin-top: 8px;">
<tbody>
<tr>
<tr>
<tr>
<tr>
<tr>
<tr>
<tr>
<tr>
<tr>
<tr>
<tr>
<tr>
<tr>
<tr>
<tr>
<tr>
<td class="ms-formlabel" width="190px" valign="top" nowrap="true">
<td class="ms-formbody" width="400px" valign="top">
<span dir="none">
<select id="ctl00_m_g_bac1b910_309d_4e46_47b4_0b8a052b0579_ctl00_ctl04_ctl15_ctl00_ctl00_ctl04_ctl00_Lookup" title="Parent company" name="ctl00$m $g_bac1b910_309d_4e46_47b4_0b8a052b0579$ctl00$ctl04$ctl15$ctl00$ctl00$ctl04$ctl00$Lookup">
<br>
I used almost all method's for selecting drop down as below
new Select(driver.findElement(By.xpath("//*[#id='ctl00_m_g_bac1b910_309d_4e46_47b4_0b8a052b0579_ctl00_ctl04_ctl15_ctl00_ctl00_ctl04_ctl00_Lookup']"))).selectByVisibleText("Baker Brazil");
i tried with id, name etc but i am getting error
org.openqa.selenium.NoSuchElementException: Unable to find element with xpath =="".
I am using IE 10 to do testing of a share point site.
Finally i got the answer i just followed steps in this blog
driver.findElement(By.xpath("//SPAN[#id='part1']/TABLE[3]/TBODY/TR[16]/TD[2]/SPAN")).click();
driver.findElement(By.xpath("//SPAN[#id='part1']/TABLE[3]/TBODY/TR[16]/TD[2]/SPAN")).sendKeys(Parentcompany);
Just give a try with below locator.
new Select(driver.findElemet(By.cssSelector("select[title='Parent company']"))).selectByVisibleText("Baker Brazil");
I think the id is auto generated one (usually .net/share point applications do). Try the below code
example:
new Select(driver.findElemet(By.xpath("//*[contains(#id='Lookup')]"))).selectByVisibleText("Baker Brazil");
Or just check which part of id is getting auto generated and modify the xpath accordingly using xpath functions (starts-with() or ends-with() or contains()) as shown in example
I checked in one of the share point application that the form/web table is located in the iframe. This is the reason why you were getting the exception.
Try the below code directly, no need to go for table proceedure
driver.findElement(By.linkText("Add new item")).click();
//give your iframe class name, which will be on top of the topmost table tag
driver.switchTo().frame(driver.findElement(By.className("ms-dlgFrame")));
//use below xpath
Select list = new Select (driver.findElement(By.xpath("//select[#title='Parent Company']")));
list.selectByVisibleText("Baker Brazil");
Need a help in loading up flexigrid for a HTML Table. I have the below piece of code and could not get flexigrid loaded when open up this html file in browsers(Tried IE, firefox, chrome). Please help in getting this work.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Phone Directory</title>
<link rel="stylesheet" type="text/css" href="css/flexigrid.css" />
<script type="text/javascript" src="jquery-1.6.1.js"></script>
<script type="text/javascript" src="js/flexigrid.js"></script>
<script type="text/javascript">
$('.flexme').flexigrid();
</script>
</head>
<body>
<table id="flexme">
<thead>
<tr>
<th width="100">Col 1</th>
<th width="100">Col 2</th>
<th width="100">Col 3 is a long header name</th>
<th width="300">Col 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>This is data 1</td>
<td>This is data 2</td>
<td>This is data 3</td>
<td>This is data 4</td>
</tr>
<tr>
<td>This is data 1</td>
<td>This is data 2</td>
<td>This is data 3</td>
<td>This is data 4</td>
</tr>
</tbody>
</table>
</body>
</html>
The document ready function is missing.
Replace the line $('.flexme').flexigrid(); with
$(document).ready(function(){
$('#flexme').flexigrid();
});