I would like to use footable (I've already use footable for its responsive exploding display )and this to show records coming from a database but with a need to have a column (which display the stock quantity of products) that thye user can modify just by typing. Is there any way of having some sort of content editable column....
Any idea will be welcome
You can render the column as HTML, which will prevent footable from taking over the content of the cell, and have an <input type="text" /> for each row.
Something like:
<table>
<thead>
<tr>
<th>Name</th>
<th data-type="html">In stock</th>
</tr>
</thead>
<tbody>
<tr>
<td>Apples</td>
<td><input type="number" step="any" value="3"/></td>
</tr>
<tr>
<td>Oranges</td>
<td><input type="number" step="any" value="0"/></td>
</tr>
</tbody>
</table>
Check the documentation at https://fooplugins.github.io/FooTable/docs/getting-started.html , look for "Column Options" > "Type" .
After rendering you can attach an event listener to the input fields and send ajax calls accordingly.
Related
I made a simple Go backend that renders an html table (from a SQLite database).
In the same backend i have an /updates endpoint with SSE events when a new row is added to the database.
I want to use htmx to listen for events and then add a row to the table.
What is the right pattern to do this?
I've read https://htmx.org/extensions/server-sent-events/
the example here is to trigger a GET when an event arrives:
<div hx-ext="sse" sse-connect="/updates">
<div hx-get="/table" hx-trigger="sse:rowadded">
...
</div>
</div>
In this way i request the entire table at every update.
How could i add only a single row to the existent rendered table?
You can do this with client side templates.
See https://htmx.org/extensions/client-side-templates/
Example:
<table>
<thead>
<tr>
<th>
Manufacturer
</th>
<th>
Model
</th>
<th>
Power (KW)
</th>
</tr>
</thead>
<tbody id="idTableBody">
<tr id="ModelId_250">
<td>Husqvarna</td>
<td>701 Supermoto</td>
<td>55</td>
</tr>
</tbody>
</table>
In this example mustache is used as templating engine.
<div hx-ext="client-side-templates">
<div hx-ext="sse" sse-connect="/sse-motorbikes">
<div sse-swap="new_bike"
hx-swap="afterbegin"
hx-target="#idTableBody"
mustache-template="idTemplateInsertModel">
</div>
</div>
</div>
Note: EventName is new_bike
Here is the template:
<template id="idTemplateInsertModel">
<tr id="modelId_{{modelId}}">
<td>
{{manufacturer}}
</td>
<td>
{{model}}
</td>
<td>
{{power}}
</td>
</tr>
</template>
With this sse event
type: "new_bike"
data:'{"modelId":208,"manufacturer":"Honda","model":"CRF 1100 L Africa Twin","power":75}'
this row will be inserted into the table body
<tr id="modelId_208">
<td>Honda</td>
<td>CRF 1100 L Africa Twin</td>
<td>75</td>
</tr>
Update
If you want to use a GET request to fetch the new row from the server, you can pass the data sent with the sse event (e.g. an id) to the request.
Check out the answer to this question.
https://stacko...how-to-get-url-for-htmx-get-from-an-sse-event-which-itself-triggers-the-hx-get-c
I would like to scrape name, address informations between tag contains defendent text and another tag,
My HTML structure is:
<hr>
<H5>Defendant/Respondent Information</H5>
<span class="InfoChargeStatement">(Each Defendant/Respondent is displayed below)</span>
<table>
<tr>
<td><span class="FirstColumnPrompt">Party Type:</span></td><td><span class="Value">Defendant</span><span class="Prompt">Party No.:</span><span class="Value">1</span></td>
</tr>
</table>
<table>
<tr>
<td><span class="FirstColumnPrompt">Name:</span></td><td><span class="Value">Name 1</span></td>
</tr>
</table>
<table>
<tr>
<td><span class="FirstColumnPrompt">Address:</span></td><td><span class="Value">Addr 1</span></td>
</tr>
<tr>
<td><span class="FirstColumnPrompt">City:</span></td><td><span class="Value">city1</span><span class="Prompt">State:</span><span class="Value">aa</span><span class="Prompt">Zip Code:</span><span class="Value">Zip1</span></td>
</tr>
</table>
<hr>
<table>
<tr>
<td><span class="FirstColumnPrompt">Party Type:</span></td><td><span class="Value">Defendant</span><span class="Prompt">Party No.:</span><span class="Value">2</span></td>
</tr>
</table>
<table>
<tr>
<td><span class="FirstColumnPrompt">Name:</span></td><td><span class="Value">Name 2</span></td>
</tr>
</table>
<table>
<tr>
<td><span class="FirstColumnPrompt">Address:</span></td><td><span class="Value">Addr2</span></td>
</tr>
<tr>
<td><span class="FirstColumnPrompt">City:</span></td><td><span class="Value">City2</span><span class="Prompt">State:</span><span class="Value">st2</span><span class="Prompt">Zip Code:</span><span class="Value">zip2</span></td>
</tr>
</table>
<hr>
<H5>Related Persons Information</H5>
<span class="InfoChargeStatement">(Each Related person is displayed below)</span>
<table>
<tr>
<td><span class="FirstColumnPrompt">Name:</span></td><td><span class="Value">Unwanted Name</span></td>
</tr>
</table>
<table>
<tr>
<td><span class="FirstColumnPrompt">Address:</span></td><td><span class="Value">un addr</span></td>
</tr>
<tr>
<td><span class="FirstColumnPrompt">City:</span></td><td><span class="Value">Unwanted City</span><span class="Prompt">State:</span><span class="Value">Unwanted city</span><span class="Prompt">Zip Code:</span><span class="Value">12345</span></td>
</tr>
</table>
<table></table>
<hr>
My current XPATH capturing the first occurence of Name and address properly, but if need to extract the multiple occurences, it also scrape the information from the unwanted h5 tags.
My current XPATH is,
"//*[contains(text(),'Defendant')]//following-sibling::table//span[text()='Name:' or text()='Business or Organization Name:']/ancestor-or-self::td/following-sibling::td//text()")
I tried including preceding sibling and following sibling but nothing gives my expected output,
My current output is..
names - [
Name1,
Name2
Unwanted Name,
]
Expected output is,
[
Name1
Name2
]
Kindly help.
try this:
"//H5[contains(text(),'Defendant')]/following-sibling::table[not(preceding-sibling::H5[not(contains(text(),'Defendant'))])]/tr[td[1][span[text()[.='Name:' ]]]]/td[2]/span/text()"
It first selects the table that has not a preceding-sibling::h5 with text() that not contains 'Defendant' and than
selects from the correct table the tr where the first td meets your requirements and selects the second td
No need for double slashes which is bad for performance
EDIT 1
Since there are more preceding-sibling::h5 than the example shows, this XPath will deal with that:
"//H5[contains(text(),'Defendant')]/following-sibling::table[preceding-sibling::H5[1][contains(text(),'Defendant')]]//tr[td[1][span[text()[.='Name:' ]]]]/td[2]/span/text()"
This will only select those tables that have as there first preceding-sibling::h5 the same h5 as we were interested in
EDIT 2
Actually now the first h5 select is redundant. This XPath will do:
"//table[preceding-sibling::H5[1][contains(text(),'Defendant')]]//tr[td[1][span[text()[.='Name:' ]]]]/td[2]/span/text()"
Is there a way to give option to user select dynamically what type of filter they want applied to one or more columns?
We are using DataTables jquery plugin for display. I'm looking into yadcf plugin to use for filtering(Open to other options as well).
yadcf is super versatile in being able to define filters for each column at design time but we want the ability for the user to select the filter type at runtime. I'm looking into the yadcf code to understand how to do this but any pointers, ideas and helpful hints would be greatly appreciated.
Thanks,
Ok I did just a simple example allowing user to define to enable/disable filtering for each column. You may extend this by placing more dropdowns and asking what type of filtering they want.
fiddle
https://jsfiddle.net/ergec/6yjrrjyr/
html
Col 1:<select class="colfiltering" data-colnumber="0">
<option value="">No</option>
<option value="1">Yes</option>
</select>
Col 2:
<select class="colfiltering" data-colnumber="1">
<option value="">No</option>
<option value="1">Yes</option>
</select>
<button id="inityadcf">
Apply Filters To Table
</button>
<br>
<br>
<br>
<table id="table_id" class="display">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
</tr>
</thead>
<tbody>
<tr>
<td>Row 1</td>
<td>2</td>
</tr>
<tr>
<td>Row 2</td>
<td>1</td>
</tr>
<tr>
<td>Row 1</td>
<td>10</td>
</tr>
</tbody>
</table>
javascript
var myTable = $('#table_id');
myTable.DataTable();
$("#inityadcf").click(function() {
var colfiltering = [];
$(".colfiltering").each(function() {
var $that = $(this);
if ($that.val()) {
colfiltering.push({
column_number: $that.data("colnumber")
});
}
});
myTable.DataTable().destroy();
myTable.DataTable();
yadcf.init(myTable.DataTable(), colfiltering);
});
I am learning Angular-2 and try to build data-grid component and run into a problem with dynamic interpolation.
Assume, the other component will consume the data-grid like the following:
<data-grid [model] = 'users'>
<column header='Last Name' value="lastName" ></column>
<column header='First Name' value='firstName' ></column>
<column header='Address' value='address' ></column>
</data-grid>
The data-grid component holds a collection of columns. From the data-gird, I try to loop through the columns collection to build the column header then show all data. The headers for the table is easy but I don't know how to do the nested interpolation for row and columns.
<div class="container" >
<table class="table table-hover">
<thead class="thead-default">
<tr>
<th template="ngFor let col of columns">
{{ col.header}}
<th>
</tr>
</thead>
<tbody>
<tr template="ngFor let row of model">
<td template="ngFor let col of columns">
<!-- want to loop though the columns
{{row.{{col.value}}}} //How to make this statement works? -->
</td>
</tr>
</tbody>
</table>
</div>
Any idea how to solve this problem?
thanks,
Austin
You do not need the additional evaluation brackets. Use square brackets for array indexing.
<tr *ngFor="let row of model">
<td *ngFor="let col of columns">
{{row[col.value]}}
</td>
</tr>
http://plnkr.co/edit/DVwolRDu0JNcsXTaTrir
I'm using the scaffold generator of phalcon
it generates table, below is an example of the generated code:
<table>
<tr>
<td align="right">
<label for="id_media">Id Of Media</label>
</td>
<td align="left">
{{ text_field("id_media", "type" : "numeric") }}
</td>
</tr>
<tr>
...
</table>
My question is how to customize the generating process to have a form, with divs instead of a table.
That's possible by modifying the following, depending on your need
Modify the views' files in phalcon-tools/templates/scaffold/no-forms/views
Modify the scaffold.php in /phalcon-tools/scripts/Phalcon/Builder/Scaffold.php
Regards