[Example] How To Fill A Table With Data In A Ui Html Panel

dyvel · February 14, 2015

Hi guys

Here's a small snippet I made showing an example, how to fill a table with data in a UI HTML panel. This can easily be extended to use a ubot table to fill the UI HTML table.

ui html panel("<style>
	body \{
		font-family: arial;
		font-size: 12px;
	\}
	.container \{
		height: 200px;
		overflow: auto
	\}
	table \{
		border: 1px solid #000;
		
	\}
	tbody td,
	thead th \{
		border-bottom: 1px solid #000;
	\}
	th, td \{ padding: 4px; \}
</style>
<div class=\"container\">
<table border=\"0\" cellpadding=\"0\" cellspacing=\"0\">
	<thead>
		<tr>
			<th>This is my header</th>
		</tr>
	</thead>
	<tfoot>
		<tr>
			<td>This is my footer</td>
		</tr>
	</tfoot>
	<tbody variable=\"#tabledata\" fillwith=\"innerhtml\">
	</tbody>
</table>
</div>",300)
set(#tabledata,$nothing,"Global")
set(#value,0,"Global")
loop(10) {
    set(#data,"Table data {#value}","Global")
    set(#tablerow,"<tr><td>{#data}</td></tr>","Global")
    set(#tabledata,$append line to text(#tabledata,#tablerow),"Global")
    increment(#value)
}

I hope you like it :-)

Table data example.ubot

dyvel · February 14, 2015

And here using jQuery + Bootstrap to prettify it a bit...

<html>
	<head>
		<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
		<script type="text/javascript" charset="utf8" src="https://code.jquery.com/jquery-2.1.3.min.js"></script>
		<script type="text/javascript" charset="utf8" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
	</head>
	<body>
		<div class="table-container">
			<table id="grid-basic" class="table table-condensed table-hover table-striped" data-toggle="bootgrid">
				<thead>
					<tr>
						<th>This is my header</th>
					</tr>
				</thead>
				<tfoot>
					<tr>
						<td>This is my footer</td>
					</tr>
				</tfoot>
				<tbody variable="#tabledata" fillwith="innerhtml">
				</tbody>
			</table>
		</div>
	</body>
</html>

Table data example.ubot

blumi40 · February 14, 2015

good example

thx

dyvel · February 14, 2015

And a closer to real world example using a list to populate the table

set(#tabledata,$nothing,"Global")
set(#i,0,"Global")
clear list(%data_list)
add list to list(%data_list,$list from text("Table data 0
Table data 1
Table data 2
Table data 3
Table data 4
Table data 5
Table data 6
Table data 7
Table data 8
Table data 9
Table data 10
Table data 11
Table data 12
Table data 13
Table data 14
Table data 15
Table data 16
Table data 17
Table data 18
Table data 19
Table data 20
Table data 21
Table data 22
Table data 23
Table data 24
Table data 25
Table data 26
Table data 27
Table data 28
Table data 29
Table data 30
Table data 31
Table data 32
Table data 33
Table data 34
Table data 35
Table data 36
Table data 37
Table data 38
Table data 39
Table data 40
Table data 41
Table data 42
Table data 43
Table data 44
Table data 45
Table data 46
Table data 47
Table data 48
Table data 49",$new line),"Delete","Global")
loop while($comparison($list total(%data_list),">",#i)) {
    set(#data,"Table data {#i}","Global")
    set(#tablerow,"<tr><td>{#data}</td></tr>","Global")
    set(#tabledata,$append line to text(#tabledata,#tablerow),"Global")
    increment(#i)
}
ui html panel("<html>
	<head>
		<link rel=\"stylesheet\" href=\"http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css\">
		<script type=\"text/javascript\" charset=\"utf8\" src=\"https://code.jquery.com/jquery-2.1.3.min.js\"></script>
		<script type=\"text/javascript\" charset=\"utf8\" src=\"http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js\"></script>
	</head>
	<body>
		<div class=\"table-container\">
			<table id=\"grid-basic\" class=\"table table-condensed table-hover table-striped\" data-toggle=\"bootgrid\">
				<thead>
					<tr>
						<th>This is my header</th>
					</tr>
				</thead>
				<tfoot>
					<tr>
						<td>This is my footer</td>
					</tr>
				</tfoot>
				<tbody variable=\"#tabledata\" fillwith=\"innerhtml\">
				</tbody>
			</table>
		</div>
	</body>
</html>",300)

Table data example.ubot

dyvel · February 14, 2015

And here's the final example using a table to populate the HTML table. The header and footer are created manually in the define makeDemoTable. The rest is done automatically calculating the number of columns and rows in the table.

on load("Bot Loaded") {
    makeDemoTable()
    makeHTMLTableRows()
}
define makeDemoTable {
    set(#i,0,"Global")
    loop(10) {
        add list to table as row(&data_table,#i,0,$list from text("Cell 1, Cell 2, Cell 3, Cell 4",","))
        increment(#i)
        set(#table_head,"<tr>
	<th>This is my header</th>
	<th>This is my header</th>
	<th>This is my header</th>
	<th>This is my header</th>
</tr>
","Global")
        set(#table_footer,"<tr>
	<td>This is my footer</td>
	<td>This is my footer</td>
	<td>This is my footer</td>
	<td>This is my footer</td>
</tr>","Global")
    }
}
define makeHTMLTableRows {
    set(#table_columns,$table total columns(&data_table),"Global")
    set(#table_row,$nothing,"Global")
    set(#j,0,"Global")
    set(#k,0,"Global")
    loop while($comparison($table total rows(&data_table),">",#j)) {
        set(#table_row,$append line to text(#table_row,"<tr>"),"Global")
        set(#k,0,"Global")
        loop while($comparison(#table_columns,">",#k)) {
            set(#table_row,$append line to text(#table_row,"<td>{$table cell(&data_table,#j,#k)}</td>"),"Global")
            increment(#k)
        }
        set(#table_row,$append line to text(#table_row,"</tr>"),"Global")
        increment(#j)
    }
}
ui html panel("<html>
	<head>
		<link rel=\"stylesheet\" href=\"http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css\">
		<script type=\"text/javascript\" charset=\"utf8\" src=\"https://code.jquery.com/jquery-2.1.3.min.js\"></script>
		<script type=\"text/javascript\" charset=\"utf8\" src=\"http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js\"></script>
	</head>
	<body>
		<div class=\"table-container\">
			<table id=\"grid-basic\" class=\"table table-condensed table-hover table-striped\" data-toggle=\"bootgrid\">
				<thead variable=\"#table_head\" fillwith=\"innerhtml\"></thead>
				<tfoot variable=\"#table_footer\" fillwith=\"innerhtml\"></tfoot>
				<tbody variable=\"#table_row\" fillwith=\"innerhtml\">
				</tbody>
			</table>
		</div>
	</body>
</html>",300)

Table data example.ubot

Pete · February 14, 2015

Just hope I can find it when I need it

dyvel · February 14, 2015

Just hope I can find it when I need it

Download the bot I've attached - problem solved

Anyway - hope you can use it...

Cheers

Code Docta (Nick C.) · February 15, 2015

Very good Sir!!!

Love to see more...I think we will see a lot from you!

I appreciate it for sure.

CD

ianshier · February 18, 2015

Hello Dyvel.

Nice work.

I can't write a PM to you, can you answer in this topic how you solved this problem?

http://www.ubotstudio.com/forum/index.php?/topic/17528-ui-html-dropdown-values-from-variable-resolved/

Thanks for reply!

Sign In

[Example] How To Fill A Table With Data In A Ui Html Panel

Recommended Posts

dyvel 20

Link to post

Share on other sites

dyvel 20

Link to post

Share on other sites

blumi40 222

Link to post

Share on other sites

dyvel 20

Link to post

Share on other sites

dyvel 20

Link to post

Share on other sites

Pete 121

Link to post

Share on other sites

dyvel 20

Link to post

Share on other sites

Code Docta (Nick C.) 638

Link to post

Share on other sites

ianshier 1

Link to post

Share on other sites

Join the conversation

Browse

Activity