Develop Reference

How to make a number with commas as thousands separator in table, javascript

I want to print an integer with a comma as a separator, for example 10,234,234
in the price column.
I have made the function, but I am a little confused how to make it in the table. Below is my code
<table class="table">
<tr>
<th> Item</th>
<th>Price</th>
</tr>
#foreach (SHOP.ViewModels.ItemViewModel item in Model.Itemss)
{
<tr>
<td> #Html.DisplayFor(modelitem => item.itemName) </td>
<td> #Html.DisplayFor(modelitem => item.itemPrice)</td>
</tr>
}
<tr>
<td></td>
<td> #Html.EditorFor(model => model.TotalPrice, new { htmlAttributes = new { #class = "form-control", #onchange = "validationCheck();", #readonly = "readonly" } }) </td>
</tr>
</table>
<script>
function numberSeparator(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
</script>

You need to get all second td elements in the table and then update the content using the code.
<table class="table" id="table">
<!-- set id to get table^^^^^^^^---->
<tr>
<th> Item</th>
<th>Price</th>
</tr>
#foreach (SHOP.ViewModels.ItemViewModel item in Model.Itemss)
{
<tr>
<td> #Html.DisplayFor(modelitem => item.itemName) </td>
<td> #Html.DisplayFor(modelitem => item.itemPrice)</td>
</tr>
}
</table>
<script>
function numberSeparator(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
// get all second tds
[...document.querySelectorAll('#table tr > td:nth-child(2)')].forEach(e => {
// get text content and update
e.textContent = numberSeparator(e.textContent.trim());
})
</script>
FYI : It's always better to do it from the backend side if possible. There may be some functions available in your backend framework/programming language.
UPDATE : In your updated code you are creating an input so get input element update it's value.
<table class="table">
<tr>
<th> Item</th>
<th>Price</th>
</tr>
#foreach (SHOP.ViewModels.ItemViewModel item in Model.Itemss)
{
<tr>
<td> #Html.DisplayFor(modelitem => item.itemName) </td>
<td> #Html.DisplayFor(modelitem => item.itemPrice)</td>
</tr>
}
<tr>
<td></td>
<td> #Html.EditorFor(model => model.TotalPrice, new { htmlAttributes = new { #class = "form-control", #onchange = "validationCheck();", #readonly = "readonly" } }) </td>
</tr>
</table>
<script>
function numberSeparator(x) {
return x.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
}
// get all second tds
[...document.querySelectorAll('#table tr > td:nth-child(2) input')].forEach(e => {
// get text content and update
e.value = numberSeparator(e.value.trim());
})
</script>

You can use toLocaleString to display a number with comma separators
let num = 1000000
let display = num.toLocaleString('us-US')
console.log(display) // 1,000,000
I suspect your code could work like this
#foreach (SHOP.ViewModels.ItemViewModel item in Model.Itemss)
{
<tr>
<td> #Html.DisplayFor(modelitem => item.itemName) </td>
<td> #Html.DisplayFor(modelitem => item.itemPrice.toLocaleString('us-US'))</td>
</tr>
}

Convert an expanded html table row to jquery datatable

I have a Jquery datatable with rows which expand into another table. The subtable displays perfectly but how do i render this table which is returned by a View into a datatable ?
Sub table view
#model IEnumerable<Virtual_Machines.Process>
#{
ViewBag.Title = "VM Monitor";
Layout = "";
}
<script type="text/javascript">
var oTable1;
/* Initialize table and make first column non-sortable*/
oTable1 = $('#innerproc').dataTable({
"bJQueryUI": true,
"aoColumns": [
{ "bSortable": false, "bSearchable": false },
null,
null,
null
]
});
</script>
<p>
#Html.ActionLink("Create New", "Create")
</p>
<table class="table" id="innerproc">
<thead>
<tr>
<th>
#Html.DisplayNameFor(model => model.ProcessName)
</th>
<th>
#Html.DisplayNameFor(model => model.PID)
</th>
<th>
#Html.DisplayNameFor(model => model.status)
</th>
<th>
#Html.DisplayNameFor(model => model.date)
</th>
<th></th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.ProcessName)
</td>
<td>
#Html.DisplayFor(modelItem => item.PID)
</td>
<td>
#Html.DisplayFor(modelItem => item.status)
</td>
<td>
#Html.DisplayFor(modelItem => item.date)
</td>
<td>
#Html.ActionLink("Edit", "Edit", new { /* id=item.PrimaryKey */ }) |
#Html.ActionLink("Details", "Details", new { /* id=item.PrimaryKey */ }) |
#Html.ActionLink("Delete", "Delete", new { /* id=item.PrimaryKey */ })
</td>
</tr>
}
</tbody>
As you can see , i tried using javascript to get a reference to the table via id attribute and then convert it to a datatable. This throws an error : Uncaught TypeError: $(...).datatable is not a function
I also tried embedding the code in the #section so that it runs when the doc.ready method is called in the main layout file, this too doesn't work. I think i'm not sure as to where to place the code to convert this table to a datatable as it is being returned by a view.

Live search partialview loads as full view with Ajax.BeginForm

I´m trying to create a live search mechanism using Ajax and partialviews. The idea is that the main view is simply a text box without submit button (this is a main requirement for the program). The user types in the box and an onchange command activates a javascript function which submits the form into a controller. The controller will then make a database search and return a partialview filled with a table of results to substitute a div in the original view.
My problem is that the partialview with the results loads as a full view, over the index and search views.
These are my code snippets starting with the index view.
#{
ViewBag.Title = "Index";
}
<h2>Index</h2>
<div id="buscar">
#Html.Action("Buscar", "Reportes")
</div>
<div id="encontrar-form">
</div>
Now the partialview with the search button
#model IEnumerable<ProyectoTamaulipas.Reporte>
<script>
function showRes () {
document.getElementById("forma").submit();
}
</script>
<div>
<br />
<br />
<h2>Haga una búsqueda por número de folio</h2>
<p>
#using (Ajax.BeginForm("Buscar", "Reportes", FormMethod.Post, new AjaxOptions(){
InsertionMode = InsertionMode.Replace,
HttpMethod = "POST",
UpdateTargetId = "encontrar-form"
}, new { id = "forma" }))
{
<input type="text" name="numero" onchange="showRes()" />
}
</p>
</div>
Now the relevant controllers
[HttpGet]
public ActionResult Buscar()
{
return PartialView("First");
}
[HttpPost]
public PartialViewResult Buscar(string numero)
{
if (numero != null)
{
int numeroF = 0;
//var query = (from a in db.Reporte
// where SqlMethods.Like(a.Calle1, "%" + parm + "%")
// select a).ToList();
List<Reporte> query = null;
if (Int32.TryParse(numero, out numeroF))
{
query = (from a in db.Reporte
where a.Folio == numeroF
select a).ToList();
}
return PartialView("reporte", query);
}
ViewBag.Message = "no se encontraron resultados";
return PartialView("reporte");
}
Finally the results view.
#model IEnumerable<ProyectoTamaulipas.Reporte>
#ViewBag.Message
<table class="table">
<tr>
<th>
#Html.DisplayNameFor(model => model.UCivil_ID)
</th>
<th>
#Html.DisplayNameFor(model => model.ServicioID)
</th>
<th>
#Html.DisplayNameFor(model => model.Ubicacion)
</th>
<th>
#Html.DisplayNameFor(model => model.Calle1)
</th>
<th>
#Html.DisplayNameFor(model => model.Calle2)
</th>
<th>
#Html.DisplayNameFor(model => model.ColoniaID)
</th>
<th>
#Html.DisplayNameFor(model => model.Comentarios)
</th>
<th>
#Html.DisplayNameFor(model => model.EstatusID)
</th>
<th></th>
</tr>
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.UCivil_ID)
</td>
<td>
#Html.DisplayFor(modelItem => item.ServicioID)
</td>
<td>
#Html.DisplayFor(modelItem => item.Ubicacion)
</td>
<td>
#Html.DisplayFor(modelItem => item.Calle1)
</td>
<td>
#Html.DisplayFor(modelItem => item.Calle2)
</td>
<td>
#Html.DisplayFor(modelItem => item.ColoniaID)
</td>
<td>
#Html.DisplayFor(modelItem => item.Comentarios)
</td>
#*<td>
#Html.DisplayFor(modelItem => item.Fotografia)
</td>*#
<td>
#Html.DisplayFor(modelItem => item.EstatusID)
</td>
</tr>
}
</table>
I already tried changing several commands and verifying the instalation of my unobtrusive ajax as well as several other things. Sorry for the long question but I've been going at this for two workdays with no luck. Thanks for the help!

I solved it by calling the jquery.unobtrusive-ajax.js on layout intead of on individual views and changing the
document.getElementById("forma").submit();
for a
$("#forma").trigger("submit");
on the search function inside the search partialview called First.

Query Database Using JavaScript

I am fairly new to JavaScript and never used Ajax before. I want to add an OnClick to the Index.cshtml, so when a row is clicked, my code will query database (MSSQL)and return results.
I have two tables in database, User and Contact. The primary key in User, UID， is the foreign key in Contact. Here's my code:
Controller
private UserInfoEntities db = new UserInfoEntities();
public ActionResult Index(){
var users = from u in db.User orderby u.UID select u;
return View(users.ToList());
}
View
#<Info.Model.User>
<script type="text/javascript">
function showEmail() {
var tb = document.getElementById("users");
var rows = tb.rows;
for (var i = 1; i < rows.length; i++) {
rows[i].onclick = (function() {
//some code that query Contact table using UID
// and return Contact.Email in a popup windows or something
});
}
}
</script>
<table class="table" id="users" onclick="showEmail()">
<tr>
<th>
#Html.DisplayNameFor(model => model.NAME)
</th>
<th>
#Html.DisplayNameFor(model => model.UID)
</th>
</tr>
#foreach (var item in Model) {
<tr>
<td>
#Html.DisplayFor(modelItem => item.NAME)
</td>
<td>
#Html.DisplayFor(modelItem => item.UID)
</td>
</tr>
Any help is appreciated!

try this;
<script type="text/javascript">
function showEmail() {
//some code that query Contact table using UID
// and return Contact.Email in a popup windows or something
}
</script>
<table class="table" id="users" >
<tr>
<th>
#Html.DisplayNameFor(model => model.FirstOrDefault().NAME)
</th>
<th>
#Html.DisplayNameFor(model => model.FirstOrDefault().UID)
</th>
</tr>
#foreach (var item in Model) {
<tr onclick="showEmail()">
<td>
#Html.DisplayFor(modelItem => item.NAME)
</td>
<td>
#Html.DisplayFor(modelItem => item.UID)
</td>
</tr>
}

Edit inline in table in index view

I use the following code to display the table rows
for every row there is edit and delete button ,what i want to do is
when I click on edit for specific row change the row from display only
to editable row (instead of navigating to other page for edit),how should I do that?
<table class="table">
<tr>
<th>
#Html.DisplayNameFor(model => model.name)
</th>
<th>
#Html.DisplayNameFor(model => model.checkBox1)
</th>
<th></th>
</tr>
<tbody id="data-table">
#foreach (var item in Model)
{
<tr>
<td>
#Html.DisplayFor(modelItem => item.name)
</td>
<td>
#Html.DisplayFor(modelItem => item.checkBox1)
</td>
<td>
#Html.ActionLink("Edit", "Edit", new { id = item.Id }) |
#Html.ActionLink("Delete", "Delete", new { id = item.Id })
</td>
</tr>
}
</tbody>
This is how the table look like
Ive try to change the code to something like this but I got following errors:
<tbody id="data-table">
#for (var i = 0; i < Model.Count(); i++)
{
<tr>
if (Model[i].Id == ViewBag.SelectedID)
{
<td>
#Html.EditorFor(model=> model[i].name)
</td>
<td>
#Html.EditorFor(m=> m[i].checkBox1)
</td>
<td>
<button type="submit" name="submit" value="save">Save</button>
<button type="submit" name="submit" value="cancel">Cancel</button>
</td>
}
}
else
{
<td>
#Html.DisplayFor(m => m[i].name)
</td>
<td>
#Html.DisplayFor(m=> m[i].checkBox1)
</td>
<td>
#Html.ActionLink("Edit", "Edit", new { id = Model[i].Id }) |
#Html.ActionLink("Delete", "Delete", new { id = Model.Id })
</td>
}
</tr>
}
The error is in statments:
#Html.EditorFor(m => m[i].name) and
#Html.EditorFor(m=> m[i]checkBox1)
try specifing the arguments explicitly,any idea?

Try with the following code
Below function make row editable
var nCurrentEdit = 0;
$('#data-table').on('click', '.btnCustomEdit', function () {
nCurrentEdit = $(this).attr("id");
var oTR = $(this).parents("tr").first();
var sText = '<input type="text" value="' + oTR.find("td:nth-child(1)").text().trim() + '" />';
oTR.find("td:nth-child(1)").html(sText);
oTR.find(":disabled").prop("disabled", false);
if (oTR.find("#btnsubmit").length == 0)
oTR.find("td:last").append("<input id='btnUpdate' type='submit' value='Update' class='btn btn-default'>");
oTR.find("td:last a").hide();
event.preventDefault();
});
Following function update the record and convert the row normal from editable mode.
$('#data-table').on('click', '#btnUpdate', function () {
var postData = {
id : nCurrentEdit,
name: $("#name").val(),
checkBox1: $("#checkBox1").val(),
checkBox2: $("#checkBox2").val(),
checkBox3: $("#checkBox3").val()
};
$.post('#Url.Action("AjaxEdit", "Roles")', postData, null);
var sNewText = $(this).parents("tr").first().find("td:first input").val();
$(this).parents("tr").first().find("td:first").append(sNewText);
$(this).parents("tr").first().find("td:first input").remove();
$(this).parents("tr").find("input[type=checkbox]").prop("disabled", true);
$(this).parent().find("a").show();
$(this).hide();
});

You could maybe use jEditable http://www.appelsiini.net/projects/jeditable and intagrate it with your table.
Maybe you can use DataTables too with jEditable if it's fits your project, something like http://datatables.net/release-datatables/examples/server_side/editable.html