We Keep Coding

Filter search bar for tickets by message

I'm on a project using Laravel and I'm kinda new to this framework.
I would like to know if there is a way to create a search bar that filters my table according to one of the tds. The table cells are filled from database so it's not static data. I have only found answers for static datas so far using Javascript.
Here is my table:
<div class="panel-body">
<table class="table table-striped table-bordered table-hovered" id="myTable">
<tr>
<td>Objet</td>
<td>Urgence</td>
<td>Statut</td>
<td>Utilisateur</td>
<td>Actions</td>
</tr>
#foreach ($tickets as $ticket)
<tr>
<td width="25%">{{ $ticket->message}}</td>
<td width="25%">{{ $ticket->urgence->niveau}}</td>
<td width="25%">{{ $ticket->statut}}</td>
<td width="25%">{{ $ticket->utilisateur->name}}</td>
<td style='white-space: nowrap'>
Voir
Supprimer
</td>
</tr>
#endforeach
</table>
{{ $tickets->render()}}
</div>
Thanks in advance.

Html datatables data to be accessed in typescript component

I want to access the chosen mfRowsOnPage. For example now it is 10.
Later the user might choose 5 or 15. I need this data in component. I
even want to get which page data is shown to the user. Example 1st
page or 2nd page , so on.
this is my table.
<table class="table" [mfData]="stacklist_table| selectedcolumn | search : searchQuery | filter: addFilter : selected" #stacklist="mfDataTable" [mfRowsOnPage]="10">
<thead>
<tr>
<th *ngFor="let colValues of stacklist.data | column: '' : ''">
<mfDefaultSorter by="{{colValues}}">{{colValues|translate}}</mfDefaultSorter>
</th>
</tr>
</thead>
<tbody>
<tr draggable *ngFor="let stack of stacklist.data" [dragOverClass]="'drag-over-border'" [dragData]="stack" [class.active]="checkIfStackElementIsSelected(stack)" (click)="setStacklistRow(stack, $event)">
<td *ngFor="let rowValues of stack | row">{{ rowValues }}</td>
</tr>
</tbody>
<tfoot>
<tr style="height: 50px;">
<td colspan="6">
<mfBootstrapPaginator [rowsOnPageSet]="[50,100,150]" style="position:fixed; margin-top: -15px"></mfBootstrapPaginator>
<!-- <mfBootstrapPaginator [hidden]='!hideElement' (dblclick)="eventEmitDoubleClick($event)" [rowsOnPageSet]="totalVisibleCount"></mfBootstrapPaginator> -->
<!-- <input [hidden]='hideElement' [(ngModel)]="newCount" (click)="doneEditing(newCount)" autofocus /> -->
</td>
</tr>
<tr (click)="loadMoreStackElements()">Load more</tr>
</tfoot>
</table>
How do I go about it?
I am new to it and not understanding the way to access this data.
https://www.npmjs.com/package/angular2-datatable

Can you try [attr.mfRowsOnPage]='10' and check if that works.

jQuery reset a single table during onchange

I have a table as follows. How to reset the table using jQuery to its original state during on change(with all th,tds). Not to reload the entire page because I have another tables also. I tried with dataTables but it adds search filters and paginations unnecessarily
<table class="table table-bordered table-hover table-sm" id="t01">
<thead style="text-align:center">
<tr>
<th class="col-md-6" style="text-align:center">Dxx</th>
<th class="col-md-2" style="text-align:center">Rxx/Unit</th>
<th class="col-md-2" style="text-align:center">Txxx</th>
<th class="col-md-2" style="text-align:center">Pxxx</th>
</tr>
</thead>
<tbody>
<tr>
<th>Full</th>
<td id="fp" style="text-align:right">0</td>
<td id="fr" style="text-align:center">0</td>
<td>
<div style="float:left">$</div>
<div style="float:right" id="fpT">0.00</div>
</td>
</tr>
<tr>
<th >Fractional</th>
<td id="fr" style="text-align:right">0</td>
<td id="frN" style="text-align:center">0</td>
<td>
<div style="float:left">$</div>
<div id="frT" style="float:right">0.00</div>
</td>
</tr>
<tr>
<th >Premium</th>
<td id="pRate" style="text-align:right">0</td>
<td id="pNos" style="text-align:center">0%</td>
<td>
<div style="float:left">$</div>
<div id="pTotal" style="float:right">0.00</div>
</td>
</tr>
<tr class="active">
<th>Premium Discount</th>
<td style="text-align:right" id="premium-discount-rate">0</td>
<td style="text-align:center">
<select id="premium-disc-list">
<option value=""></option>
</select>
</td>
<td>
<div style="float:left">$</div>
<div style="float:right" id="premium-discount-total">0.00</div>
</td>
</tr>
</tbody>
</table>
jQuery
var table = $('#t01').dataTable();
//table.clear().draw();
//table.fnClearTable();
//table.fnDraw();
//table.fnDestroy();
//table.fnDraw();

I have 2 options in my mind:
1) You can mark all the elements that could be reset with some 'resetable' class and add data-original-val property, and once you decide to reset it do something like that:
$('.resetable','#t01').each(function(){
var originalVal = $(this).data('original-val');
$(this).html(originalVal);
})
2) Render another copy of the table inside type="text/html" script like this:
<script type="text/html" id="t01-original">
<table class="table table-bordered table-hover table-sm" id="t01">
<thead style="text-align:center">
<tr>
<th class="col-md-6" style="text-align:center">Dxx</th>
<th class="col-md-2" style="text-align:center">Rxx/Unit</th>
<th class="col-md-2" style="text-align:center">Txxx</th>
<th class="col-md-2" style="text-align:center">Pxxx</th>
</tr>
</thead>
...
</table>
</script>
this way all the content of the script tag won't be parsed and you won't have duplicate id issues. On the reset simply replace the content of the table with the one from the script:
//t01-container is the id of div that wraps the table:
$( '#t01-container').html($('#t01-original').html());

AngularJS Somehow sorting two tables with one click

I have two tables on an angular page, both with clickable headers for sorting. Somehow, clicking headers in either table sorts BOTH tables, even though they have different column names, and different 'orderByField' variables.
First Table:
<table class="table table-striped table-bordered table-hover" style="width: 100%;">
<thead>
<tr>
<th class="clickable colored_text span7 textLeft" ng-click="flagOrderByField='FlagName'; reverseSort = !reverseSort">Flag Name</th>
<th class="clickable colored_text span2 textLeft" ng-click="flagOrderByField='DateAdded'; reverseSort = !reverseSort">Date Added</th>
<th class="clickable colored_text span2 textLeft" ng-click="flagOrderByField='Expires'; reverseSort = !reverseSort">Expires</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="flag in FlagList | orderBy:flagOrderByField:reverseSort" style="border-top: 1px dashed rgb(200, 200, 200);">
<td ng-class="flag.SystemFlag ? 'text-error' : 'text-success'">{{::flag.FlagName}}</td>
<td>{{::flag.DateAdded | date:'MM/dd/yyyy' }}</td>
<td>{{::flag.Expires | date:'MM/dd/yyyy' }}</td>
</tr>
</tbody>
</table>
Second Table:
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th class="clickable colored_text" ng-click="orderByField='CourseNumber'; reverseSort = !reverseSort">Course #</th>
<th class="clickable colored_text" ng-click="orderByField='ClassName'; reverseSort = !reverseSort">Course Name</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="class in classes | orderBy:orderByField:reverseSort | startAt:(currentPage-1)*pageSize | limitTo:pageSize">
<td>{{::class.CourseNumber }}</td>
<td>{{::class.ClassName }}</td>
</tr>
</tbody>
</table>
How can I get these two tables to sort separately? (This page also has a bunch of other tables, in tabs that load on tab-click, that all share this same strange behavior.)

Aha - In a bit of quick intuiting, I noted that both tables used the same 'reverseSort' variable. I changed it for the first table to 'flagReverseSort', and set the default in the controllers.js to false; voila! it works as it should. So not only do the tables need their own orderBy variable, but they need their own, unique, reverseSort variable.

How to speed up rendering table of checkboxes in Angular.js

I'm making a series charting tool. For each series, I have 4 categories. I want the user to be able to choose any combination of series and category to plot.
To accomplish this, I created a bootstrap modal with a table of checkboxes for each series/category combination using Angular.js. It works, but I find the rendering of the modal too slow when there are too many series:
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>Series Name</th>
<th ng-repeat="col in cols">
{{ col }}
</th>
<th>select all</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="(name, insts) in items"
ng-show="([name] | filter:query).length > 0">
<td>{{ name }}</td>
<td ng-repeat="inst in insts">
<input type="checkbox" ng-model="inst.isSelected">
</td>
<td><ui-select-all items="insts" prop="isSelected"></ui-select-all></td>
</tr>
</table>
Plunker demo of what I have: http://plnkr.co/edit/1zmZMpDsGwaKdyL7dFty?p=preview
I'm just learning Angular, so I'm not too sure how to speed this up, or if there is a smarter approach than using a big table of checkboxes.

the best way to speed up any ng-repeat is to use track by $index
<tr ng-repeat="(name, insts) in items track by $index"
ng-show="([name] | filter:query).length > 0">
<td>{{ name }}</td>
<td ng-repeat="inst in insts track by $index">
<input type="checkbox" ng-model="inst.isSelected">
</td>
<td><ui-select-all items="insts" prop="isSelected"></ui-select-all></td>
</tr>