We Keep Coding

How can I edit the particular data from API in angular

Actually, I have listed some data from API using ngFor and it's working fine. But I have a problem with editing the data. When I click the edit button it's editing the overall data but I want to edit the particular row only. Here is my code. Please refer
HTML
<table class="table table-striped" style="width: 98%; margin: 10px auto;">
<thead>
<tr>
<th><strong>Name</strong></th>
<th><strong>Consent Type</strong></th>
<th><strong>Updated At</strong></th>
<th><strong>Status</strong></th>
<th><strong>Content</strong></th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr *ngFor="let consent of SystemConsent">
<th *ngIf="!editorStatus">{{consent.fileName}}</th>
<th *ngIf="editorStatus"><input type="text" value="{{consent.fileName}}" class="form-control"></th>
<th *ngIf="!editorStatus">{{consent.type}}</th>
<th *ngIf="editorStatus"><input type="text" value="{{consent.type}}" class="form-control"></th>
<th>{{consent.updatedAt}}</th>
<th *ngIf="!editorStatus">{{consent.status}}</th>
<th *ngIf="editorStatus"><input type="text" value="{{consent.status}}" class="form-control"></th>
<th *ngIf="!editorStatus" [innerHTML]="consent.content"></th>
<th *ngIf="editorStatus">
<ckeditor name="htmlEditor" [config]="config" [editor]="Editor" [(ngModel)]="consent.content" skin="moono-lisa" language="en">
</ckeditor>
</th>
<th><button class="btn trans-btn list-head-btn ng-star-inserted btn-gradient" (click)="changeEditor()">Edit</button></th>
<th><button [disabled]="!editorStatus" class="btn trans-btn list-head-btn ng-star-inserted btn-gradient" (click)="getEditorValue()">Save</button></th>
</tr>
</tbody>
</table>
Typescript
getAdminSystemPrefrences() {
this.adminDashboardService.getSystemPreferences().then(resp => {
this.SystemConsent = resp['data'].consent;
});
}
changeEditor() {
this.editorStatus = true;
}
getEditorValue() {
this.editorStatus = false;
}
Screenshot
Please Help me to fix this issue

You should define smth as a unique cell identifier (id, name, ...) in the data.
Define a public property to store the editing cell id
public selectedEditCellId; // number, string, UUID, etc
on invoking the edit mode, pass the cell id
changeEditor(cellId) {
this.selectedEditCellId = cellId;
this.editorStatus = true;
}
pass the cell ID on click
<td *ngIf="!editorStatus" (click)="changeEditor(CELL_ID)">{{consent.status}}
</td>
<td *ngIf="editorStatus && consent.id === selectedEditCellId">
<input type="text" value="{{consent.status}}" class="form-control">
<button (click)="changeEditor(undefined)">close editior</button>
</td>
then you can update the *ngIf condition to check the editorStatus property and the identifier
*ngIf="editorStatus && consent.id === selectedEditCellId"

Bootstrap table using 'checkAll' method only checks the checkboxes in the current page

I have a bootstrap table in my HTML5 page.
When using $('#bk-table').bootstrapTable('checkAll')
Only the checkboxes in current page r checked.
How could I check all the checkboxes in all page?
My bootstrap table:
<form>
{% csrf_token %}
<table contenteditable='true' class="table table-bordered table-xl" width="100%" cellspacing="0" style="font-size: 1.0rem;"
id="bk-table"
data-toggle="table"
data-toolbar="#toolbar"
data-cookie="true"
data-cookie-id-table="materialId"
data-show-columns="true"
data-show-export="true"
data-height="1650"
data-click-to-select="true"
data-id-field="id"
data-show-footer="true"
data-url="/api/materials/"
data-query-params="queryParams"
data-remember-order="true"
data-pagination="true"
data-side-pagination="client"
data-total-field="count"
data-data-field="results">
<thead class="thead-dark" >
<tr contenteditable='true'>
<th data-field="state" name="checkbox" class="data-checkbox" id="data-checkbox" data-checkbox="true" ></th>
<th class ='courseCode' data-field="courseCode" data-formatter="renderCourse">Course Code</th>
</tr>
</thead>
</table>
</form>
My button event:
<button class="button" type="button" onclick="select_all();">Select All</button>
<script>
function select_all()
{
$('#bk-table').bootstrapTable('checkAll')
}
</script>

bootstrapTable('checkAll') is for Check/Uncheck all current page rows. For selecting all the pages, first you load data let data = $("#bk-table").bootstrapTable('getData'); and iterate though data object & update the id field state (because data-field="state" for check box) value to true in the object array data then you reload table with your updated data $('#bk-table').bootstrapTable('load', data);
Please find sample updated data object array:
data = [{"id":1,"courseCode":"Item 1","state":true},{"id":2,"courseCode":"Item 2","state":true},{"id":3,"courseCode":"Item 3","state":true}];
function select_all()
{
let data = $("#bk-table").bootstrapTable('getData'); //getting table data
for(let i=0;i<data.length;i++){
data[i]['state'] = true;
}
$('#bk-table').bootstrapTable('load', data); //reloading table data after updation
}
<button class="button" type="button" onclick="select_all();">Select All</button>
up votes will be appreciated!

Uncaught Error when using the right selector in JQuery to indicate a HTML table and use a Bootstrap-table function

I have a table inside a div in my Index.cshtml page (Asp.Net core)
<div id="tbldiv">
<table
id="tblCampaign"
class="table"
data-toggle="table">
<thead>
<tr>
<th data-field="name" scope="col">Name</th>
<th data-field="country">Country</th>
<th data-field="totalBudget">Total Budget</th>
<th data-field="dailyBudget">Daily Budget</th>
<th data-field="model">Model</th>
<th data-field="payout">Payout</th>
<th data-field="status">Status</th>
<th data-field="link">Link</th>
<th data-field="advertiserID">Advertiser ID</th>
</tr>
</thead>
</table>
</div>
I want to populate my table using Bootstrap table.
Here's my site.js:
$(document).ready(function () {
$('Index').ready(function () {
$.getJSON('Index?handler=ListCampaigns', function (data) {
$("#tblCampaign").bootstrapTable({
columns: data
});
});
});
});
My OnGetListCampaign() in Index.cshtml.cs:
public JsonResult OnGetListCampaigns()
{
var jsonCampaigns = CampaignManager.GetCampaignsTest();
return new JsonResult(jsonCampaigns);
}
Which Select from SQL database and return a List of my Item.
Here's my problem:
When I run it, it complains about the selector in site.js if I understood the problem, I used $("#tblCampaign") for and it should be right to select the Id using #
Uncaught Error: Syntax error, unrecognized expression: <div class="bootstrap-table bootstrap4">
<div class="fixed-table-toolbar"></div>
<div class="fixed-table-container">
<div class="fixed-table-header"><table></table></div>
<div class="fixed-table-body">
<div class="fixed-table-loading">
<span class="loading-wrap">
<span class="loading-text">Loading, please wait</span>
<span class="animation-wrap"><span class="animation-dot"></span></span>
</span>
</div>
</div>
<div class="fixed-table-footer"><table><thead><tr></tr></thead></table></div>
</div>
<div class="fixed-table-pagination"></div>
</div>

I want to make a have a datepicker(calendar) to filter my database record base on timestamps (Laravel 6)

How to add a date picker for my reports data (Laravel6)
I still have no idea on where to start.
Here is my report controller(index):
public function index()
{
$reports=Report::orderBy('id', 'DESC')->paginate(10);
return view('reports.index',['reports' => $reports]);
}
Here is my index on my report.index html
<div class="table-responsive">
<table class="table align-items-center table-flush">
<thead class="thead-light">
<tr>
<th scope="col">Name</th>
<th scope="col">Student number</th>
<th scope="col">Transaction</th>
<th scope="col">Remarks</th>
<th scope="col">Queue number</th>
<th scope="col">Created at</th>
<th scope="col"></th>
</tr>
</thead>
<tbody>
#foreach ($reports as $report)
<tr>
<td>{{ $report->name}}</td>
<td>{{ $report->snumber}}</td>
<td>{{ $report->transaction}}</td>
<td>{{ $report->remarks}}</td>
<td>{{ $report->letter}}-{{ $report->number}}</td>
<td>{{ $report->created_at }}</td>
</tr>
#endforeach
</tbody>
</table>
</div>
<div class="card-footer py-4">
<nav class="d-flex justify-content-end" aria-label="...">
{{ $reports->links() }}
</nav>
</div>
My database table look like this:
Schema::create('reports', function (Blueprint $table) {
$table->bigIncrements('id');
$table->string('snumber');
$table->string('name');
$table->string('email');
$table->string('mobile');
$table->string('department');
$table->string('letter');
$table->integer('number');
$table->string('transaction');
$table->string('remarks')->nullable();
$table->timestamps();
$table->softDeletes();
});
Please help me. Thanks!

To filter your data first you have to put your datepicker within form tag outside of your table which contains data.
If you want to use ajax call then pass that form value which contains filter date and in same index method you can check that this call is ajax call or not.
If ajax call then override variable with filtered data.
Something like this,
$reports=Report::orderBy('id', 'DESC')->paginate(10);
if($request->ajax()){
$reports=Report::orderBy('id', 'DESC')->whereDate('created_at', today())->paginate(10);
}
return view('reports.index',['reports' => $reports]);
if you dont want to use ajax call and want to load page, then you can pass the data and check that it exist or not, something like this,
$reports=Report::orderBy('id', 'DESC')
->when(! empty(\request('filterdate')), function($q) {
return $q->whereDate('created_at', today());
})
->paginate(10);
return view('reports.index',['reports' => $reports]);
It will only filter date when filterdate is not empty.
Hope this helps :)

How to make href work in jquery-bootgrid basic plugin

Am using bootgrid-basic to show my data,
<table id="grid-basic"
class="table table-bordered table-striped table-condensed mb-none">
<thead>
<th data-column-id="aa">aa</th>
<th data-column-id="ss" data-order="desc">ss</th>
<th data-column-id="dd">dd</th>
<th data-column-id="ff">ff</th>
<th data-column-id="aaa">aaa</th>
<th data-column-id="aaaaa" >aaaAa</th>
</tr>
</thead>
<tbody>
#foreach($alldata as $data)
<tr>
<td>{{$data->aa}}</td>
<td>{{$data->ss}}</td>
<td>0</td>
<td>{{$data->dd}}</td>
<td>{{$data->ff}}</td>
<td>ASSSsdf</td>
</tr>
#endforeach
</tbody>
</table>
and initialized $("#grid-basic").bootgrid(); in script.
Everything is working fine like search,data ordering ,pagination but those links doesnt see to work.
If i use formatter links work and remaining doesnt work.
$("#grid-basic").bootgrid(
formatters: {
"action": function (column, row)
{
return '<a href=\"/model/' + row.actions + '"\>' +row.actions+ '</a>' ;
}});
A jsfiddle link here : http://jsfiddle.net/6xpyxbcg/

There is a parentheses missing in your JS, it should be bootgrid({ and you need to add data-formatter="link" to the th tag of the column you wish to use the formatter on (i.e. the link column).
HTML
<th data-column-id="link" data-formatter="link" >Received</th>
JQuery
$(function()
{
$("#grid-basic").bootgrid({
formatters: {
"link": function(column, row)
{
return "" + row.link + "";
}
}
}
)
});
Demo in jsFiddle
P.S. trying using the built in snippet next time, as there is a one click button that allows you to copy the code to the answer section and amend it accordingly.