Develop Reference

PL-SQL, Oracle Apex: How can I add pagination to a PL-SQL dynamic content table?

I created a PL-SQL dynamic content report in Oracle Apex, however I am having trouble figuring out how to add pagination to it. I have too many rows and therefore adding pagination to the table will provide a better user experience. My sample code looks as follows:
BEGIN
htp.p('<table>
<tr> <th>ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th></tr>');
for i in(select * from exampleTable)
loop
htp.p('<tr>
<td>'||i.id||'</td>
<td>'||i.first_Name||'</td>
<td>'||i.last_name||'</td>
<td>'||i.email||'</td>
</tr>');
end loop;
htp.p('</table>');
END;

Create two hidden items on the page, say, Pxx_START_ROW and Pxx_PAGE_SIZE.
Modify your query to be paginated. That will require that you sort the data somehow assuming you want the results to be deterministic. So rather than
select *
from exampleTable
you'd have
select *
from exampleTable e
order by e.id
offset :Pxx_START_ROW rows
fetch next :Pxx_PAGE_SIZE rows only
Then create a process that updates Pxx_START_ROW when you click some sort of a "previous" or "next" button. You'll probably want to update your dynamic process to generate those buttons because I'd expect you'd want them to be part of the table though functionally you could create those buttons in a different region.

Go to page > JavaScript > File URLs, use this url
https://cdn.datatables.net/1.10.23/js/jquery.dataTables.min.js
https://cdn.datatables.net/1.10.23/js/dataTables.bootstrap4.min.js
Go to page > CSS > File URLs, use this url
https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.css
https://cdn.datatables.net/1.10.23/css/dataTables.bootstrap4.min.css
create a region, region type PLSQL dynamic content
begin
htp.p('
<table id="example" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th>ID</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
</tr>
</thead>
<tbody>');
for i in(select * from exampleTable)
loop
htp.p('
<tr>
<td>'||i.id||'</td>
<td>'||i.first_Name||'</td>
<td>'||i.last_name||'</td>
<td>'||i.email||'</td>
</tr>');
end loop;
htp.p('
<tbody>
</table>');
end;

(TS)Property Rows does not exist on type HTMLInputElemet

Hi I am new to angular and type script..I need to check whether table is empty or not and depending upon that I need to hide or display a div. I tried,
var rows = document.getElementById('associatedEmailsTable'))rows; and
var rows =(<HTMLInputElement>document.getElementById('associatedEmailsTable')).rows;
but both are giving same result, Please help me in this.
Please suggest me how can I find whether table tr has any value inside it or not using javascript.
and My HTML code is
<table class="table table-sm table-hover" id="associatedEmailsTable" style="display:none">
<tr>
<th>
Email
</th>
<th>
Action
</th>
</tr>
<tr *ngFor="let oEmailAddress of this.associatedEmailAddresses">
<td>{{oEmailAddress.email}}</td>
</tr>
</table>

The issue is exactly what the error says, "Property Rows does not exist on type HTMLInputElemet".
Assuming that you have <table id="associatedEmailsTable">... then what you have is a HTMLTableElement.
So:
var rows = (document.getElementById('associatedEmailsTable') as HTMLTableElement).rows;

X-Editable re-enable after partial re-render

I have the following table on a laravel blade that uses x-editable to update some of its fields (note, this is my first ever PHP project so if there are better ways to do this, please share):
<table id="LinksTable" class="table table-bordered">
<thead>
<tr>
<th>Display</th>
<th>Link Display Name</th>
</tr>
</thead>
<tbody>
<?php $link_settings = Link_setting::whereNotNull('link_address')->get();?>
#foreach($link_settings as $link_setting)
<tr id="linkRow.{{$link_setting->id}}">
<td hidden="true">{{$link_setting->id}}</td>
<td><input id="linkD.{{$link_setting->id}}" name="is_displayed"
checked="{{$link_setting->is_displayed}}"
onChange="OnDisplayChange(this)" type="checkbox"></td>
<td><a href="#" class="listEdit" data-type="text"
data-column="display_name" data-url="./link_settings/update"
data-pk="{{$link_setting->id}}" data-title="change"
data-name="display_name">{{$link_setting->display_name}}</a>
</td>
</tr>
#endforeach
</tbody>
</table>
This renders fine the first time and I can edit the display name on any of the rows with it updating the database correctly.
My problem is that I have an "add" button that creates a new object in the database. After added, I need to reload the table to display this entry as well.
function RefreshTable() {
$('.listEdit').editable("destroy");
$( "#linksTableMainDiv" ).load(location.href + " #LinksTable");
$('.listEdit').editable();
}
The table re-renders fine, but the x-editable breaks, without errors that I can locate.

For anyone coming across this post, I ended up reworking this to add a row via javascript, rather than reloading the table. Adding $('.listEdit').editable(); after the table.appendChild(row) enables all the editable fields in the new row. Assigned data-pk=0 to each, and as part of the update controller, returned the id. I then update the row's data-pk elements upon success of the editable function.

How to set the default sorting order for this AngularJS website?

I am using AngularJS. I would like to make a table to sort by the first column immediately after the webpage finish loading. The HTML table code looks like this;
<table class="table table-hover data-table sort display">
<thead>
<tr>
<th class="col_1">
Column 1
</th>
<th class="col_2">
Column 2
</tr>
</thead>
<tbody>
<tr ng-repeat="item in filteredList | orderBy:columnToOrder:reverse">
<td>{{item.col_1}}</td>
<td>{{item.col_2}}</td>
</tr>
</tbody>
</table>
Now, the table simply loads the data without any particular sorting order as the webpage loads until I click on the column heading. If I want to set the default to be sorted by column 1 immediately after the webpage loads, how should the html code look like? Or do I have to modify the controller instead?
Thank you.

In your controller you can initialize the value of columnToOrder like this:
$scope.columnToOrder = 'col_1';

Get Columns Name or Header Text of GridView Using JavaScript

I am developing a web application where I need Column's name of grid view using javascript. After that, display this column's name on Div.
Please help me out this.

There is no standard way to do so. GridView is nothing but a html table at runtime. So best you can do is to grab this table through javascript and grab its columns.
Suppose, you have declared your gridview like this:
<asp:GridView ID="GridView1" runat="server">
</asp:GridView>
and have bound it at runtime like this:
DataTable dt= new DataTable();
db.Columns.Add("Col1");
db.Columns.Add("Col2");
db.Rows.Add("one", "two");
GridView1.DataSource = dt;
GridView1.DataBind();
then at runtime, a markup like below is generated for your gridView
<table cellspacing="0" rules="all" border="1" id="GridView1"
style="border-collapse:collapse;">
<tr>
<th scope="col">Col1</th>
<th scope="col">Col2</th>
</tr>
<tr>
<td>one</td>
<td>two</td>
</tr>
</table>
so clearly, columns are the th elements in the GridView table, which you can easily grab through javascript like below:
var table = document.getElementById('GridView1');
var headers = table.getElementsByTagName('th');
for(var i=0;i<headers.length;i++)
{
alert(headers[i].innerText);
//or append to some div innerText
}
see this fiddle on how to grab table elements

GridView is rendered as HTML table on your page source, hence you can use Jquery to get the , view source and check if its associated with any class and then you can use it as selector, or regular $('table tr th') this post may help you How to get a table cell value using jQuery?