I have table
<table class="table dataTable table-striped table-bordered"
cellspacing="0" width="100%"
data-toggle="table"
data-processing="true"
data-serverSide="true"
data-ajax="#Url.Action("GetUsers", "Users")"
data-type="post"
data-page-length="25"
data-order="[[0,"asc"]]"
>
<thead>
<tr>
<th>ID</th>
<th>Role</th>
<th>User name</th>
<th>Date registered</th>
<th></th>
</tr>
</thead>
</table>
my js where init table
$(document).ready(() => {
let table = $('[data-toggle="table"]');
if (table.length > 1) {
table.DataTable();
}
});
I sees request ajax to GetUsers, but without parameters. What I should to do for fixed it? I should using more html attributes, or I should using js?
Related
I have a web app, front end has a bootstrap table, whose data rendered from Django rest framework.
As the data is rendered using data-field, it only has table header, does not have table column.
I want to make some some column editable but some not, but but failed to do so. The contenteditable='true'/'false' flag does not function on a column level.
How could I make some column editable but some not？
<table contenteditable='true' class="table table-bordered table-sm" 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-refresh="true"
data-show-fullscreen="true"
data-height="650"
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" data-checkbox="true"></th>
<th data-field="type">Course Type</th>
</tr>
</thead>
</table>
use bootstrap table plugin "x-editable" to make a column editable or non-editable use
data-editable="true" data-editable="false" respectively on <tr>
for example
<table id="my_table_id"
<thead>
<tr>
<th class="col-md-1">#</th>
<th class="col-md-4" data-editable="true">Name</th>
<th class="col-md-7" data-editable="false">Description</th>
</tr>
</thead>
</table>
I am using table-striped style provided by Bootstrap in a table. And I am using angular js to populate the data. It is not showing the table in stripe format. Can someone help me in recognizing the error that I am making?
<table class="table table-striped">
<thead>
<tr>
<th>H1</th>
<th>H2</th>
<th>H3</th>
<th>H4</th>
<th>H5</th>
<th>H6</th>
</tr>
</thead>
<tbody ng-repeat="e in data.events">
<tr>
<td>{{e.e1}}</td>
<td>{{e.e2}}</td>
<td>{{e.e3}}</td>
<td>{{e.e4}}</td>
<td>{{e.e5}}</td>
<td>{{e.e6}}</td>
</tr>
</tbody>
</table>
I think you meant to put the ng-repeat on the tr element instead of the body. You're repeating the body instead of rows.
Bootstrap alternates the colours on the rows, and since you are creating a new table body with 1 row each, it's only going to show one color.
I believe your issue is the placement of the repeat directive. If you move it to your tr element, it should be fine. As is, it is creating a new tbody element for each item in your events array. Since table-striped alternates the background color of even rows, and each tbody contains only 1 row, you aren't seeing that style applied.
<table class="table table-striped">
<thead>
<tr>
<th>H1</th>
<th>H2</th>
<th>H3</th>
<th>H4</th>
<th>H5</th>
<th>H6</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="e in data.events">
<td>{{e.e1}}</td>
<td>{{e.e2}}</td>
<td>{{e.e3}}</td>
<td>{{e.e4}}</td>
<td>{{e.e5}}</td>
<td>{{e.e6}}</td>
</tr>
</tbody>
</table>
<table class="table table-striped">
<thead>
<tr>
<th>H1</th>
<th>H2</th>
<th>H3</th>
<th>H4</th>
<th>H5</th>
<th>H6</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="e in data.events">
<td>{{e.e1}}</td>
<td>{{e.e2}}</td>
<td>{{e.e3}}</td>
<td>{{e.e4}}</td>
<td>{{e.e5}}</td>
<td>{{e.e6}}</td>
</tr>
</tbody>
</table>
This should work fine, but you need to repeat the table rows <tr>, not the table body <tbody>.
I am trying to update my array of contacts type on DOM. However I am getting every value when I am calling that array in a function but that value of array is not getting updated in DOM.
import {Component} from 'angular2/core';
#Component({
selector:'contacts',
templateUrl:'./dev/RouteComponents/contacts.component.html'
})
export class ContactsComponent{
checking=false;
contacts=[
{firstname:'vishu',lastname:'handa',contactno:'12654',gender:'male'},
{firstname:'lalit',lastname:'gupta',contactno:'56489',gender:'male'},
{firstname:'aman',lastname:'singh',contactno:'48984',gender:'male'},
{firstname:'gaurav',lastname:'gupta',contactno:'5485',gender:'male'}
];
addContactToContactList(firstname,lastname,contact,gender)
{
console.log(firstname.value+"--"+lastname.value+"--"+contact.value+"--"+gender.value);
this.contacts.push({firstname:firstname.value,lastname:lastname.value,contactno:contact.value,gender:gender.value});
this.run();
}
run()
{
console.log(this.contacts.length);
this.checking = true;
}
}
<p *ngIf="checking">checking</p>
<table class="table table-bordered table-hover table-condensed">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Contact Name</th>
<th>Gender</th>
</tr>
</thead>
<tbody>
<tr *ngFor="#contact of contacts">
<td>{{contact.firstname}}</td>
<td>{{contact.lastname}}</td>
<td>{{contact.contactno}}</td>
<td>{{contact.gender}}</td>
</tr>
</tbody>
</table>
Value is not getting updated in DOM
Change your table rows tr tag for *ngfor as below and check it again :
<tr *ngFor="let contact of contacts">
<td>{{contact.firstname}}</td>
<td>{{contact.lastname}}</td>
<td>{{contact.contactno}}</td>
<td>{{contact.gender}}</td>
</tr>
I have a WCF service and and we had to generate a records of clients who have consumed free credit.
I have generated that records but now clients with same login ID's are repeating in the records.
I dnt want to display the login ID again but want to display all the numbers they have called.
Here is the code of my view
#model IEnumerable<MyYello.Admin.Models.CallHistory>
#{ViewBag.Title = "UsersWhoHaveConsumedFreeCredit";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<h2>Users Who Have Consumed Free Credit</h2>
<table class="table table-striped table-bordered tablesorter" style="display: block">
<thead>
<tr>
<th>Login</th>
<th>FirstName</th>
<th>LastName</th>
<th>Email</th>
<th>Country</th>
<th>Phone</th>
<th>TarrifDesc</th>
<th>CalledNum</th>
<th>CallStart</th>
<th>CallEnd</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td>#item.Login</td>
<td>#item.FirstName</td>
<td>#item.LastName</td>
<td>#item.Email</td>
<td>#item.Country</td>
<td>#item.Phone</td>
<td>#item.TariffDescription</td>
</tr>
}
#if (!Model.Any())
{
<tr>
<td colspan="14">No Record Found</td>
</tr>
}
</tbody>
</table>
Just need an idea how
You should group by user login first then. Here's an example:
#foreach (var group in Model.GroupBy(history => history.Login))
{
var item = group.First();
<tr>
<td>#item.Login</td>
<td>#item.FirstName</td>
<td>#item.LastName</td>
<td>#item.Email</td>
<td>#item.Country</td>
<td>#string.Join(" - ", group.Select(history => history.Phone))</td>
<td>#item.TariffDescription</td>
</tr>
}
I'm returning a list generated form a csv file in an html table format:
<span class="gwt-HTML">
<div id="productList">
nullnullnullnullnull
<table cellspacing="0">
<tbody>
<tr>
<th>Type Name</th>
<th>Class Name</th>
<th>Sub Class Name</th>
<th>Minor Class Name</th>
<th>Country Origin</th>
<th>SKU</th>
etc..
Notice the weird nullnullnullnullnull showing up? This happens when after the html gets converted into the widget:
SimplePanel pnl = new SimplePanel();
HTML res = new HTML(result);
pnl.add(res);
RootPanel.get("tableData").add(pnl);
The result variable is the html string:
<div id="productList">
<table cellspacing="0">
<tbody>
<tr>
<th>Type Name</th>
<th>Class Name</th>
<th>Sub Class Name</th>
<th>Minor Class Name</th>
<th>Country Origin</th>
<th>SKU</th>
...etc
I've checked to make sure the result String does not contain the null's. Anybody have an idea as to why this is happening? Very strange...