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();
});
Related
The minimal code is given below. Note that -
I need 1px border(I think that means need border-collapse).
Also transition and background-color change cannot be compromised.
CSS only solution.
Am doing wrong or would you have a fix/alternate, or its a bug. Please help me out. Thank you.
<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
#wrap-div{display:flex;}
#com_table{width:800px; border-collapse:collapse; border-spacing:0px; margin:50px auto;text-align:center}
th, td{border:1px solid #3AC;}
#com_table > tbody > tr:hover{color:#fff; background-color:#aaa; transition:all .25s linear;}
</style>
</head>
<body>
<div id="wrap-div">
<table id="com_table">
<thead>
<tr>
<th>Order Date</th>
<th>Status</th>
<th>Total Amt</th>
</tr>
</thead>
<tbody>
<tr>
<td>24/05/2021</td>
<td>NEW</td>
<td>900.00</td>
</tr>
<tr>
<td>24/05/2021</td>
<td>CONFIRMED</td>
<td>900.00</td>
</tr>
<tr>
<td>28/05/2021</td>
<td>CONFIRMED</td>
<td>850.00</td>
</tr>
<tr>
<td>28/05/2021</td>
<td>CONFIRMED</td>
<td>1845.00</td>
</tr>
<tr>
<td>15/05/2021</td>
<td>SETTLED</td>
<td>4221.00</td>
</tr>
<tr>
<td>17/05/2021</td>
<td>SETTLED</td>
<td>1549.00</td>
</tr>
<tr>
<td>17/05/2021</td>
<td>SETTLED</td>
<td>250.00</td>
</tr>
<tr>
<td>18/05/2021</td>
<td>SETTLED</td>
<td>1249.00</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
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>
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 have referred to several SO questions and answers. Still I could not find a solution for pagination to tables. Please someone provide me the appropriate javascript coding for pagination with necessary plugins(if any). My table is filled with data from API call. Thanks in advance
<!DOCTYPE html>
<html lang="en" xmlns:margin-right="http://www.w3.org/1999/xhtml" xmlns:padding-bottom="http://www.w3.org/1999/xhtml"
xmlns:width="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Telephone Extension Finder</title>
<link href = "css/bootstrap.min.css" rel = "stylesheet">
<link href = "css/main.css" rel = "stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.css">
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.js"></script>
</head>
<body>
<div id = "tableDiv" class = "tab-pane fade in active">
<table id = "myTable"
class= "table-responsive container table table-hover table-bordered table-striped"
style="width:35%; margin-right: 15%;">
<thead style = "background-color: #800080; color: white;">
<th style = "width: 5%">Name</th>
<th style = "width: 1.2%">Code</th>
</thead>
<tbody></tbody>
</table>
</div>
<script src = "js/jquery-3.2.1.min.js"></script>
<script src ="js/bootstrap.min.js"></script>
<script src = "js/main.js"></script>
<script src = "js/impExt.js"></script>
<script src="js/confRoom.js"></script>
</body>
</html>
Above is my HTML page
I think what you want is a pagination in the tables. I have a solution.
You can use datatables. This is a very good plugin.
https://datatables.net go to this link and see. It is compatible with bootstrap and responsive too.
Check the examples .
Hope it will help.
<!DOCTYPE html>
<html lang="en" xmlns:margin-right="http://www.w3.org/1999/xhtml" xmlns:padding-bottom="http://www.w3.org/1999/xhtml"
xmlns:width="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Telephone Extension Finder</title>
<link href = "css/bootstrap.min.css" rel = "stylesheet">
<link href = "css/main.css" rel = "stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.css">
</head>
<body>
<div id = "tableDiv" class = "tab-pane fade in active">
<table id = "myTable"
class= "table-responsive container table table-hover table-bordered table-striped"
style="width:35%; margin-right: 15%;">
<thead style = "background-color: #800080; color: white;">
<th style = "width: 5%">Name</th>
<th style = "width: 1.2%">Code</th>
</thead>
<tfoot>
<tr>
<th style = "width: 5%">Name</th>
<th style = "width: 1.2%">Code</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior Technical Author</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
</tr>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
</tr>
</tbody>
</table>
</div>
<script src = "js/jquery-3.2.1.min.js"></script>
<script src = "js/main.js"></script>
<script src = "js/impExt.js"></script>
<script src="js/confRoom.js"></script>
<script type="text/javascript" charset="utf8" src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#myTable').DataTable();
} );
</script>
</body>
</html>
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");