My filter for the column is working, what I want to do now is make a default filter, that will applied on table creation.
<table id="testTable"
data-side-pagination="server">
<thead>
<tr>
<th class="question" data-field="UserFullName" data-sortable="false" data-filter-control="select">Name: </th>
<th class="question" data-field="UserJobTitle" data-sortable="false" data-filter-control="select" data-filter-data="var:userJobTitles">JobTitle: </th>
</tr>
</thead>
<script>
var userJobTitles = {
Admin: 'Admin',
IT: 'IT',
General : 'General',
Security : 'Security',
CEO : 'CEO',
};
</script>
In this example, I want to make IT Jobtitle a default job title.
This seems to be close to the solution bootstrap-table / How to add filter-control in table configuration , the issue is that i dont want to do it on the javascript side.
I think this feature is available out of the box in Bootstrap Table. Please see: filterDefault column option documentation
There is no need to write JavaScript for that, you could just use data-filter-default attribute on the <th> element corresponding to the column which you want to filter. So in your case it would be:
<th class="question"
data-field="UserJobTitle"
data-sortable="false"
data-filter-control="select"
data-filter-data="var:userJobTitles"
data-filter-default="IT">JobTitle: </th>
Important: It is necessary to use the "key" of your data-filter-data (see: filterData column option documentation).
Hopefully this helps :).
Related
I've been struggling with the foreach blade directive when combined with Laravel-Livewire and dynamically changing data rendered in an html table.
Specific scenario:
A table is presented to the user
Each row of the table includes a clickable icon that toggles a variable associated with that row
Toggling this icon visibly removes the row from the table
It sounds simple enough but I cannot get it to work correctly.
<?php
namespace App\Http\Livewire;
use Livewire\Component;
class UnreconciledServices extends Component
{
public $services;
public function render()
{
return view('livewire.unreconciled-services');
}
//
// receives an invoice number and changes the "reconciled" value for the $aaaServices record to true
//
public function test($a)
{
}
}
This is pretty simple - there is a function called "test" that accepts a variable (the function does nothing at all) and there is a collection of records called $services that has been passed in from the parent.
The blade file is as follows:
<div>
<table style="width:100%">
<thead>
<tr>
<th width="5%">
</th>
<th>
Service Date
</th>
<th>
Call #
</th>
<th>
Payment
</th>
</tr>
</thead>
<tbody>
#foreach ($services as $service)
{{-- <span wire:key="{{$service->invoice_number}}"> --}}
{{-- #if ($service->reconciled == false) --}}
<tr id="{{$service->invoice_number}}" class="text-center" style="{{ $service->reconciled == 1 ? 'display:none' : 'show'}}">
<td>
{{-- <input class="m-2" type="checkbox"> --}}
{{-- <span class="m-2"><i class="far fa-trash-alt text-red-500"></i></span> --}}
<span wire:key="{{$service->invoice_number}}" wire:click="test('{{$service->invoice_number}}')" class="m-2 cursor-pointer"><i class="lm-2 rm-2 fas fa-plus text-green-500"></i></span>
</td>
<td>
{{$service->invoice_date}}
</td>
<td>
{{$service->call_number}}
</td>
<td>
{{$service->service_price}}
</td>
</tr>
{{-- #endif --}}
{{-- </span> --}}
#endforeach
</tbody>
</table>
</div>
This is a simple table with 4 columns. The 1st is a clickable icon, the other 3 are data. Rows should only be visible if the "reconciled" boolean is 0.
When initially rendered, the appropriate records are displayed (there are 2 that qualify and 177 that do not). However, as soon as I click the icon - even when the function it links to has zero actual content - all records are suddenly visible except for the one that I've just hidden.
Looking at the html change when I click the icon, the tag changes from
<tr id="21031251674" class="text-center" style="display:none">
to
<tr id="21031253205" class="text-center" style="show">.
I have tried using livewire keys, though I'm not sure how this would affect the functionality since I'm not rendering components, but rather data driven html.
Surely someone else has encountered this and overcome. Please point me in the right direction.
Sorry for the delay. This whole thread should be deleted as bone-headed. But it was written in earnest...
When all was said and done, I was unclear on the differences b/w an html / ajax - based approach such as livewire and something more javascript-based such as Vue. I was expecting functionality that didn't exist in the framework as I was attempting to use it.
To solve the problem, I moved towards individual row items being components in and of themselves, using emit to communicate between components and adjust the backend data source.
Once I embraced the html / ajax approach and stopped trying to force / expect javascript functionality & dom manipulation then all was well. Just a mindset difference from what I am familiar with, and it took me some time to turn the corner.
So I have built a table in semantic-ui. very simple. however styles dont seem to apply to my table in certain aspects and i cant get the headings to map over the columns. see the below screenshot
the L column is fine but the others are a bit wonky and name is just well off. how can i adjust the styles so make this work?
I have tried to add a width to the div my table sits in but it just extends it without altering the table body or head
here is the code:
<div className="tableContainer">
<h1> Table </h1>
<table className="ui striped table">
<thead>
<tr>
<th className="headings">Ranks</th>
<th className="headings">Name</th>
<th className="headings">P</th>
<th className="headings">W</th>
<th className="headings">L</th>
</tr>
</thead>
<tbody>
{this.props.players.sort(function(a, b) {
return (a.rank) - (b.rank);
}).map(function(player, index) {
index +=1;
return <tr key={index} className="table-rows">
<td className="stats">{player.rank}</td>
<td className="stats">{player.name}</td>
<td className="stats">{player.played}</td>
<td className="stats">{player.wins}</td>
<td className="stats">{player.losses}</td>
</tr>
}, this)}
</tbody>
</table>
</div>
If you are working in Reactjs, you should use Semantic-UI's reactjs package: Semantic-UI React. In the Table section, you can see that certain properties are passed through props. You can set the column number with columns prop. And under the Table.Header tab, you can see that there's a className prop. You can use it to style your header. For reference, visit: Semantic-UI React Table.
I have a table which I have applied sorting to but to complete this task I would like the classes to change to show carets going up or down based on the sorting.
As you can see I have used the standard SortableMixin within Ember to get the sorting functionality but I'm having trouble changing the class of the individual element which has been clicked.
App.CampaignsController = Ember.ArrayController.extend({
sortProperties: ["id"],
sortAscending: true,
actions: {
sortBy: function(property){
if (this.get("sortProperties")[0] === property){
this.toggleProperty("sortAscending");
} else {
this.set("sortProperties", [property]);
this.set("sortAscending", true)
}
}
}
});
The table I'm I've applied the actions to is below:
<table class="table table-striped table-hover">
<thead>
<tr>
<th {{action "sortBy" "name"}}><i {{bind-attr class=":fa sortAscending:fa-caret-up:fa-caret-down"}}></i>Campaign Name</th>
<th {{action "sortBy" "campaign_code"}}><i {{bind-attr class=":fa sortAscending:fa-caret-up:fa-caret-down"}}></i>Campaign Code</th>
</tr>
</thead>
<tbody>
<td>{{name}}</td>
<td>{{campaign_code}}</td>
</tbody>
</table>
I'm using the sortAscending boolean to dictate what CSS class will appear. My problem is if I click the first heading, the classes on the second heading also change.
How do I get the CSS to change only on the heading that I have clicked?
Your <th> now has state (whether it's sorted, and whether it's ascending or descending), so you should wrap it up in a component. Something like this
<table>
<thead>
<tr>
{{#sortable-th property='name' action='sortBy'}}
Campaign Name
{{/#sortable-th}}
</tr>
</thead>
</table>
The component's template
// templates/components/sortable-th.js
<th>
<i {{bind-attr class=":fa sortAscending:fa-caret-up:fa-caret-down"}}></i>
{{yield}}
</th>
and code
// components/sortable-th.js
export default Ember.Component.extend({
sortAscending: true,
click: function() {
this.toggleProperty('sortAscending');
this.sendAction('action', this.get('property'), this.get('sortAscending'));
}
}
That's just a rough outline, try the implementation yourself. But that's how I would start thinking about it.
I have 2 objects results and headers being headers generated from _.keys(result[0])
r{
data:{
headers:['head1','head2']
result:[
{head1:'content1',head2:'content2'}
{head1:'content3',head2:'content4'}
{head1:'content5',head2:'content6'}
]
}
I have to create a table dinamically so I create this:
<table class="ui celled table segment">
<thead>
<tr>
{{#headers}}
<th>{{.}}</th>
{{/headers}}
</tr></thead>
<tbody>
{{#result:i}}
<tr>
{{#headers:h}}
<td>{{????}}</td> <-- Here is where I fail to know what to put into
{{/headers}}
</tr>
{{/result}}
</tbody>
</table>
Can someone help me to fill in the blanks. So I can create a table that display the contents
If I remove the {{#headers}} part and I already know the elements <td>{{.head1}}</td> work perfectly the problem is that I'am generating different objects on the fly.
{{#result:i}}
<tr>
{{#headers:h}}
<td>{{result[i][this]}}</td>
{{/headers}}
</tr>
{{/result}}
The reason this works is that the <td> is repeated for each item in the headers array, because it's inside a headers section - so far, so obvious. Because of that, we can use this to refer to the current header (head1, head2 etc). The trick is to get a reference to the current row - and because you've already created the i index reference, we can do that easily with result[i]. Hence result[i][this].
Here's a demo fiddle: http://jsfiddle.net/rich_harris/dkQ5Z/
i cant find how put a cell with an href in a dojo toolkit datagrid, the version od dojo that am using is 1.6
this is my table
<table id="billsGrid" dojoType="dojox.grid.DataGrid" data-dojo-props="escapeHTMLInData:false">
<thead>
<tr>
<th field="name" width="auto">name</th>
<th field="description" width="auto">Description</th>
<th field="activity" width="auto">activity</th>
</tr>
</thead>
</table>
am getting the data with Json.
You can use formatter function to format a cell. For example, you can declare a JavaScript object that contains all the formatting function.
var myFormatters = {
formatLink : function(value, index) {
return "<a href='#'>" + value + "</a>";
}
};
Then in the grid,
<table id="billsGrid" dojoType="dojox.grid.DataGrid" data-dojo-props="escapeHTMLInData:false" formatterScope="myFormatters" >
<thead>
<tr>
<th formatter="formatLink" field="name" width="auto">name</th>
<th field="description" width="auto">Description</th>
<th field="activity" width="auto">activity</th>
</tr>
</thead>
</table>
You don't need to create a scope object for the formatters, then this formatting functions should be in the global scope and then you can omit the formatterScope attribute in the grid.
dojo grid is escaping html tags by default for security reasons, you can simply enable html tags doing this:
<table dojoType="dojox.grid.DataGrid" escapeHTMLInData="false" ...>
or this if your grid is added programatically
escapeHTMLInData: false
more info here:
http://dojotoolkit.org/reference-guide/dojox/grid/DataGrid.html