Jquery DataTable date filter not working in client side - datatables

I am using Jquery DataTable in my MVC Application. I want to filter data in DataTable using Date-Range. when the page loads i am getting all the data from DB. so i need to implement this date range filter in one column of DataTable in client side. I have tried below coding but the date is not getting filtered.
HTML Table:
<table border="0" cellspacing="5" cellpadding="5">
<tbody>
<tr>
<td>From Date:</td>
<td><input type="text" id="min" name="min"></td>
</tr>
<tr>
<td>To Date:</td>
<td><input type="text" id="max" name="max"></td>
</tr>
</tbody>
</table>
<table id="Billing">
<thead>
<tr>
<th>Select</th>
<th>Company Name</th>
<th>Amount</th>
<th>Invoice Date</th>
<th>Status</th>
<th>Comments</th>
</tr>
</thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td><input type="checkbox" value=#item.companyId /></td>
<td> #item.CompanyName </td>
<td> #item.TotalAmount </td>
<td> #item.InvoiceDate </td>
<td> #item.Status </td>
<td> #item.Notes </td>
</tr>
}
</tbody>
</table>
jquery DataTable Initialize:
<script>
$(document).ready(function () {
$("#min").datepicker();
$("#max").datepicker();
var table = $('#Billing').dataTable(
{
"aLengthMenu": [[5, 10, 20, -1], [5, 10, 20, "All"]],
"iDisplayLength": 10
}).columnFilter({
sPlaceHolder: "head",
aoColumns: [null, null, null, { "type": "date-range" }, null, null]
});
// Event listener to the two range filtering inputs to redraw on input
$('#min, #max').keyup(function () {
table.draw();
});
});
$.fn.dataTable.ext.search.push(
function (settings, data, dataIndex) {
var dateMin = $('#min').attr("value");
var dateMax = $('#max').attr("value");
dateMin = dateMin.substring(0, 4) + dateRange.substring(5, 7) + dateRange.substring(8, 10);
dateMax = dateMax.substring(13, 17) + dateRange.substring(18, 20) + dateRange.substring(21, 23);
var date = aData[3];
// remove the time stamp out of my date
// 2010-04-11 20:48:22 -> 2010-04-11
date = date.substring(0, 10);
// remove the "-" characters
// 2010-04-11 -> 20100411
date = date.substring(0, 4) + date.substring(5, 7) + date.substring(8, 10)
// run through cases
if (dateMin == "" && date <= dateMax) {
return true;
}
else if (dateMin == "" && date <= dateMax) {
return true;
}
else if (dateMin <= date && "" == dateMax) {
return true;
}
else if (dateMin <= date && date <= dateMax) {
return true;
}
// all failed
return false;
}
);
</script>

Related

Laravel Combine results in one table

I managed to get the results with this code in the controller and blade file i wrote that to see the results, but i can't merge the two tables into one single table, i don't understand what i need to do to see everything in one single table, i tried different ways but i failed in all, only seperate currently i can see them but what i need is to see them all in the same table, can anyone help me to get the final result with only one table?
$startDate = Carbon::create(2023, 1)->startOfMonth();
$endDate = Carbon::create(2023, 12)->endOfMonth();
$uptimeData = Ticket::query()
->select(['ticket_Id','created_at'])
->orderBy('created_at', 'asc')
->whereBetween('created_at', [$startDate, $endDate])
->whereRaw("cast(date_format(created_at, '%H') as SIGNED) between 7 and 15")
->get();
$intervals = \Carbon\CarbonInterval::hours(1)->toPeriod($startDate, $endDate);
$uptimeDataTimeline = $uptimeData->groupBy(function ($item, $key) use ($intervals) {
$date = Carbon::parse($item->created_at);
foreach ($intervals as $key => $interval) {
if ($date->hour == Carbon::parse($interval)->addHours(1)->hour) {
$actualHour1 = Carbon::parse($interval)->hour;
if (strlen($actualHour1) == 1) $actualHour1 = "0$actualHour1";
return $date->format("Y-m-d $actualHour1:00:00");
}
else if ($date->hour == Carbon::parse($interval)->addHours(1)->hour) {
$actualHour2 = Carbon::parse($interval)->subHours(1)->hour;
if (strlen($actualHour2) == 1) $actualHour2 = "0$actualHour2";
return $date->format("Y-m-d $actualHour2:00:00");
}
}
return $date->format('Y-m-d H:00:00');
});
$uptimeDataTimeline = $uptimeDataTimeline->map(function($checksInPeriod, $key) {
$down = 0;
$up = 0;
$total = 0;
$uptime = 0;
$fill = '#1fc777';
foreach($checksInPeriod as $key => $value){
$total++;
if ($total <= 4) {
$up++;
} else {
$down++;
}
}
$uptime = floatval(number_format(round($up / $total, 5) * 100, 2, '.',','));
if ($uptime < 100) $fill = '#9deab8';
if ($uptime < 99) $fill = '#fbaa49';
if ($uptime < 98) $fill = '#e0465e';
return [
'total_ticket_Id' => $total,
'down_ticket_Id' => $down,
'up_ticket_Id' => $up,
'uptime' => $uptime,
'fill' => $fill,
];
});
$dataset = [
'uptimeData' => $uptimeData,
'uptimeDataTimeline' => $uptimeDataTimeline,
];
<thead>
<tr>
<th>
Total
</th>
<th>
Up
</th>
<th>
Down
</th>
<th>
Uptime
</th>
</tr>
</thead>
<tbody>
#foreach ($dataset['uptimeDataTimeline'] as $data)
<tr>
<td>
{{ $data['total_ticket_Id'] }}
</td>
<td>
{{ $data['up_ticket_Id'] }}
</td>
<td>
{{ $data['down_ticket_I'] }}
</td>
<td>
<div class="progress-bar bg-success" style="width: {{ $data['uptime'] }}%">{{ $data['uptime'] }} %</div>
</td>
</tr>
#endforeach
</tbody>
</table>
<thead>
<tr>
<th>
Ticket
</th>
<th>
Data
</th>
</tr>
</thead>
<tbody>
#foreach ($dataset['uptimeData'] as $data)
<tr>
<td>
{{ $data['ticket_Id'] }}
</td>
<td>
{{ $data['created_at'] }}
</td>
</tr>
#endforeach
</tbody>
</table>

Get value of hidden column in DataTable

Once a button is selected on my page I need to iterate through a DataTable, find the row with the radio button that's selected and then get the value from a hidden column on that row. I've tried just about everything but my hidden columns aren't accessible, only my 3 visible columns. My code example has several of the options I've tried to I apologize if it's a little messy. This is my first time posting so please don't get mad if I've messed something up here. I've seen the .fnGetData option but it's listed as "legacy" so I'd rather not use it (???).
Table Setup:
var thisurl = '#Url.Action("Addresses", new { AddUID = "000" })';
thisurl = thisurl.replace("000", #ViewBag.AddUID);
$('##ViewBag.TblID').dataTable({
"columnDefs": [
{
"targets": [0, 1],
"visible" : false
}
],
"searching": false,
"info": false,
"paging": false,
"order": [1, "desc"],
"ajax": {
"type": "POST",
"url": thisurl,
"contentType": 'application/json; charset=utf-8',
"data": function (data) { return data = JSON.stringify(data); }
},
"columns": [
{ "data": "Adrs_UID" },
{ "data": "revision_id" },
{
"render": function (data, type, row) {
var url = '#Html.RadioButton("000", "select", false, htmlAttributes: new { #id = "111", onclick = "ResetRadioBtns()" })';
url = url.replace("000", '#ViewBag.ChkID').replace("111", '#ViewBag.ChkID');
return url;
}
},
{
"render": function (data, type, row) {
return row.Adrs_One + ' ' + row.Adrs_City + ' ' + row.Adrs_St + ' ' + row.Adrs_Zip;
}
},
{
"render": function (data, type, row) {
var text = 'Print';
var target = '_blank';
var link = '../DocGen/DocGen_AB.aspx?AUID=' + row.Adrs_UID + '&REV=' + row.revision_id;
return '' + text + '';
}
}
]
});
Script
$('.btnAPL_DTV').click(function (e) {
var table = $('#tblAPLAddress_DTV').DataTable();
table.rows().every(function (value, index) {
node = table.row(value).node();
var check = $(node).find("input[id$='chbxAPLAdSelect_DTV']");
var data1 = $('#tblAPLAddress_DTV').DataTable().row(this).data();
data = data1[0];
if (check.prop("checked") == true) {
// Get Rev_Id & Adrs_UID from Hiddent Field
var allData = table.row(index).data();
var revData = allData[0].data();
adrsUID = node.data()[0];
revId = node.data()[1];
}
});
});
UPDATE 08-13-2021
Andrew - Here the script code and my results from yesterday using your example (including using the index value so you can see what I did yesterday):
$("#tblAPLAddress_DTV").on("click", ":radio", function () {
var table = $('#tblAPLAddress_DTV').DataTable();
var rowNode = $(this).parent().parent()[0];
console.log("Result using .Adrs_UID: " + table.row(rowNode).data().Adrs_UID);
console.log("Result using Index Value: " + table.row(rowNode).data()[0]);
});
And here are my results displayed in the console:
Result using .Adrs_UID: undefined
Result using Index Value: <input id="chbxAPLAdSelect_DTV" name="chbxAPLAdSelect_DTV" onclick="ResetRadioBtns()" type="radio" value="select">
I'm not sure which HTML you're referring to. Here's my HTML table set-up. #ViewBag.TblID = "tblAPLAddress_DTV":
<div class="row">
<div class="col-md-offset-1">
<table id=#ViewBag.TblID class="table text-nowrap" style="padding-top:1em">
<thead>
<tr>
<th>Address UID</th>
<th>RevisionID</th>
<th></th>
<th>Address</th>
<th>Address Block</th>
</tr>
</thead>
</table>
</div>
</div>
And I don't think this matters but I apologize if it does. My table HTML set-up and table definition script above are in a Partial View.
Here's the Html call in the Index View to call the PartialView:
#{ Html.RenderAction("_Addresses", "DocGeneration", new { id = "tblAPLAddress_DTV", chkId = "chbxAPLAdSelect_DTV", AddUID = ViewBag.AddUID });}
Hope this gives you the info you need.
UPDATE 2
Updated script:
$("#tblAPLAddress_DTV").on("click", ":radio", function () {
var table = $('#tblAPLAddress_DTV').DataTable();
var rowNode = $(this).parent().parent()[0];
console.log(rowNode);
});
Console results - I didn't drill down too far.
<tr role="row" class="odd">
<td class="sorting_1">
<input id="chbxAPLAdSelect_DTV" name="chbxAPLAdSelect_DTV" onclick="ResetRadioBtns()" type="radio" value="select">
</td>
<td>17647 157TH STREET BONNER SPRINGS XX 66000</td>
<td>Print</td>
</tr>
These console results are the same as the HTML getting generated.
Thank you!
I have taken a simplified version of your table and code to show one possible approach:
$(document).ready(function() {
var table = $('#example').DataTable( {
"columnDefs": [
{
"targets": [0, 1],
"visible" : false
}
]
} );
$( "#example" ).on( "click", ":radio", function() {
var rowNode = $( this ).parent().parent()[0];
console.log( table.row(rowNode).data()[0] );
});
} );
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Demo</title>
<script src="https://code.jquery.com/jquery-3.5.1.js"></script>
<script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.css">
<link rel="stylesheet" type="text/css" href="https://datatables.net/media/css/site-examples.css">
</head>
<body>
<div style="margin: 20px;">
<table id="example" class="display dataTable cell-border" style="width:100%">
<thead>
<tr>
<th>Name</th>
<th>Position</th>
<th>Office in Country</th>
<th>Age</th>
<th>Start date</th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td>Tiger Nixon</td>
<td>System Architect</td>
<td>Edinburgh</td>
<td>61</td>
<td>2011/04/25</td>
<td><input type="radio"></td>
</tr>
<tr>
<td>Garrett Winters</td>
<td>Accountant</td>
<td>Tokyo</td>
<td>63</td>
<td>2011/07/25</td>
<td><input type="radio"></td>
</tr>
<tr>
<td>Ashton Cox</td>
<td>Junior "Technical" Author</td>
<td>San Francisco</td>
<td>66</td>
<td>2009/01/12</td>
<td><input type="radio"></td>
</tr>
<tr>
<td>Cedric Kelly</td>
<td>Senior Javascript Developer</td>
<td>London</td>
<td>22</td>
<td>2012/03/29</td>
<td><input type="radio"></td>
</tr>
<tr>
<td>Airi Satou</td>
<td>Accountant</td>
<td>Milan</td>
<td>33</td>
<td>2008/11/28</td>
<td><input type="radio"></td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
(In my case, the radio buttons are not cleared after each click, because I did not add that logic.)
How this works:
I use a delegated event handler:
$( "#example" ).on( "click", ":radio", function() { ... }
This allows events to be attached to radio buttons which may not initially be drawn - for example, if they are not on page 1 of the DataTable's paginated data.
I extract the row node (the <tr> element) using jQuery:
var rowNode = $( this ).parent().parent()[0];
In my case, the row node is the grandparent (.parent().parent()) of the radio button. Your case may be slightly different. I don't know what your final rendered HTML structure is.
In my case, each row of data is stored as an array of values (not as an object), so I can use the following to access the first hidden value:
table.row(rowNode).data()[0]
Note that the table variable was already defined as part of the DataTable declaration.
If your row data is provided as objects { ... } instead of arrays [ ... ], you will need to adjust your code accordingly.
You can log table.row(rowNode).data() to the console to see for yourself. You haven't shown us your JSON data, but it looks as if you would need to access the named values, such as adrsUID - so probably this:
table.row(rowNode).data().adrsUID

Angular2 Search Filter How to display No Record is found

<input Type="text" (keyup)="someval('$event.target.value')"/>
<table>
<tr>
<th> Id</th>
<th>Name</th></tr>
<tr *ngFor="let emp of pagedItems">
<td>{{emp.Id}}</td>
<td>{{emp.Name}}</td>
</tr>
<tr *ngIf="ErrorHandle">
<td colspan="5">
{{ErrorMsg}}
</td>
</tr>
Typescript
Here i writen some code to handle my Search text box its accepect Id value and find rec within the table.When Record is their its display the Rec but wen its not available i wana 2 hide *ngFor
someval(value){
if(value.length>=5){
this._pagedItems= this.allItems.find(e=>e.uniqueid == value);
if(this._pagedItems == undefined){
this.ErrorHandle=true;
this.ErrorMsg="No Such Record is Present......."
}
else{
this.pagedItems=[];
this.pagedItems.push(this._pagedItems);
}
You can do something like following code. I create it in FIDDLE
import { Component } from '#angular/core';
#Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
name = 'Angular 6';
ErrorHandle :Boolean = false;
ErrorMsg :string ="No Such Record is Present.......";
allItems = [{ Id: 1, Name: "chintan" }]
pagedItems = [];
emp = { Id: 1, Name: "chintan" };
someval(value) {
if (value) {
this.pagedItems = [];
let emp = this.allItems.find(e => e.Id == value);
if (emp == undefined) {
this.ErrorHandle = true;
} else {
this.ErrorHandle = false;
this.pagedItems.push(emp);
}
}
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/2.0.0-beta.17/angular2-all-testing.umd.dev.js"></script>
<hello name="{{ name }}"></hello>
<p>
Start editing to see some magic happen :)
</p>
<input Type="text" (keyup)="someval($event.target.value)" />
<table>
<tr *ngIf="!ErrorHandle">
<th> Id</th>
<th>Name</th>
</tr>
<tr *ngFor="let emp of pagedItems">
<td>{{emp.Id}}</td>
<td>{{emp.Name}}</td>
</tr>
<tr *ngIf="ErrorHandle">
<td colspan="5">
{{ErrorMsg}}
</td>
</tr>
</table>

Populating ViewModel from multiple tables in SQL

I'm trying to create a SPA that queries the AdventureWorks2012 database and populates a strongly typed table based on a datetime range using Jquery ui datepicker.
The issue I'm experiencing is it returns all of the same duplicate record.
Duplicate Records
Thanks for the help!
_Layout View code:
<div>
<h2>Pick a date range:</h2>
<form action='#Url.Action("GetOrders","Home")' method="post">
<label for="from">From</label>
<input type="text" id="from" name="startDate">
<label for="to">To</label>
<input type="text" id="to" name="endDate">
<input type='submit' value='Set Range' />
</form>
</div>
$( function() {
var dateFormat = "mm/dd/yy",
from = $( "#from" )
.datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3
})
.on( "change", function() {
to.datepicker( "option", "minDate", getDate( this ) );
}),
to = $( "#to" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3
})
.on( "change", function() {
from.datepicker( "option", "maxDate", getDate( this ) );
});
function getDate( element ) {
var date;
try {
date = $.datepicker.parseDate( dateFormat, element.value );
} catch( error ) {
date = null;
}
return date;
}});
GetOrders.cshtml Code:
#model System.Collections.Generic.List<ApexAssignment.ViewModels.OrderViewModel>
#foreach (var item in Model)
{
<tr>
<td class="tg-yw4l">
#item.Store
</td>
<td class="tg-yw4l">
#item.Customer
</td>
<td class="tg-yw4l">
#item.AccountNumber
</td>
<td class="tg-yw4l">
#item.InvoiceNumber
</td>
<td class="tg-yw4l">
#item.CustomerPO
</td>
<td class="tg-yw4l">
#item.OrderDate
</td>
<td class="tg-yw4l">
#item.DueDate
</td>
<td class="tg-yw4l">
#item.InvoiceTotal
</td>
<td class="tg-yw4l">
#item.ProductNumber
</td>
<td class="tg-yw4l">
#item.Quantity
</td>
<td class="tg-yw4l">
#item.UnitNet
</td>
</tr>
}
Controller Method Code:
[HttpPost]
public ActionResult GetOrders(DateTime startDate, DateTime endDate)
{
var model = (from p in db.People
from pd in db.Products
from so in db.SalesOrderDetails
from sh in db.SalesOrderHeaders
where sh.OrderDate > startDate && sh.OrderDate < endDate
from s in db.Stores
from c in db.Customers
select new OrderViewModel()
{
AccountNumber = sh.AccountNumber,
Customer = p.FirstName + " " + p.LastName,
Store = s.Name,
ProductNumber = pd.ProductNumber,
DueDate = sh.DueDate,
CustomerPO = sh.PurchaseOrderNumber,
Quantity = so.OrderQty,
InvoiceNumber = sh.SalesOrderNumber,
UnitNet = so.UnitPrice,
InvoiceTotal = sh.TotalDue,
OrderDate = sh.OrderDate
});
return View(model.ToList());
}
var model = db.SalesOrderDetails
.Where(e => e.SalesOrderHeader.OrderDate > startDate)
.Where(e => e.SalesOrderHeader.OrderDate < endDate)
.Join(db.Products, order => order.ProductID,
product => product.ProductID, (order, product) => new
{
Quantity = order.OrderQty,
UnitNet = order.UnitPrice,
DueDate = order.SalesOrderHeader.DueDate,
CustomerPO = order.SalesOrderHeader.PurchaseOrderNumber,
InvoiceNumber = order.SalesOrderHeader.SalesOrderNumber,
InvoiceTotal = order.SalesOrderHeader.TotalDue,
OrderDate = order.SalesOrderHeader.OrderDate,
AccountNumber = order.SalesOrderHeader.AccountNumber,
Store = order.SalesOrderHeader.Customer.Store.Name,
Customer = order.SalesOrderHeader.Customer.Person.FirstName + " " +
order.SalesOrderHeader.Customer.Person.LastName,
ProductNumber = product.ProductNumber
}).ToList();

Can datatables sort a column with an input field?

I am trying to make datatables sort my columns. The first column works okay as it's a simple number. However the next column is an input field. When I try to make that sort then nothing happens.
<table width="100%" cellspacing="0" class="table sortable no-margin">
<thead>
<tr>
<th scope="col" class="sorting" style="width: 57px;">
<span class="column-sort">
</span>
ID
</th>
<th scope="col" class="sorting_desc" style="width: 94px;">
<span class="column-sort">
</span>
Order
</th>
</tr>
</thead>
<tbody>
<tr id="row_20" class="odd">
<td id="refKey_20" style="text-align:center;" class="">
1Y
</td>
<td class=" sorting_1">
<input type="text" value="160" size="3" name="item.Order"
maxlength="3" id="Order_20" >
</td>
</tr>
<tr id="row_19" class="even">
<td id="refKey_19" style="text-align:center;" class="">
1X
</td>
<td class=" sorting_1">
<input type="text" value="150" size="3" name="item.Order"
maxlength="3" id="Order_19" >
</td>
</tr>
</tbody>
</table>
Is there some way that I can get datatables to sort input fields?
The easiest way is to add a hidden span inside columns <span style="visibility:hidden">value of the input</span>
You should look at this example that explains how to do sorting on input fields. Basically you declare a sorting function
/* Create an array with the values of all the input boxes in a column */
$.fn.dataTableExt.afnSortData['dom-text'] = function ( oSettings, iColumn )
{
var aData = [];
$( 'td:eq('+iColumn+') input', oSettings.oApi._fnGetTrNodes(oSettings) ).each( function () {
aData.push( this.value );
} );
return aData;
}
And then tell to your table to use that
$('#example').dataTable( {
"aoColumns": [
null,
{ "sSortDataType": "dom-text" }
]
} );
or wit aoColumnDefs
$('#example').dataTable( {
"aoColumnDefs": [{ "sSortDataType": "dom-text" , aTarget: "yourclass"}]
} );
For versions of Datatables 1.10+ the names of some option variables have been changed and a new API introduced. Documentation here: http://datatables.net/examples/plug-ins/dom_sort.html.
Here is a working version of the above accepted answer in 1.10+:
$(document).ready(function () {
var table = $('#example').DataTable({
"columnDefs": [
{
"orderDataType": "dom-input",
"targets": 0, // Just the first column
},
],
});
});
The custom sort function:
$.fn.dataTable.ext.order['dom-input'] = function (settings, col) {
return this.api().column(col, { order: 'index' }).nodes().map(function (td, i) {
return $('input', td).val();
});
}
jQuery.fn.dataTableExt.oSort['textbox-asc'] = function (a, b) {
var vala = $('#' + $(a).filter('input').attr('id')).val().toLowerCase();
var valb = $('#' + $(b).filter('input').attr('id')).val().toLowerCase();
if (vala === '')
return 1;
if (valb === '')
return -1;
return vala < valb ? -1 : vala > valb ? 1 : 0;
};
jQuery.fn.dataTableExt.oSort['textbox-desc'] = function (a, b) {
var vala = $('#' + $(a).filter('input').attr('id')).val().toLowerCase();
var valb = $('#' + $(b).filter('input').attr('id')).val().toLowerCase();
if (vala === '')
return 1;
if (valb === '')
return -1;
return vala < valb ? 1 : vala > valb ? -1 : 0;
};
then use it like this
$(datatable).dataTable({
"iDisplayLength": 50,
"bLengthChange": false,
"bPaginate": false,
"columns": [
null, { "sType": "textbox" }
],
});
If you decide to use the columns option where you are rending information from a JSON file you can easily add a hidden span on your render property. It appears as though DataTables looks for text to order and if it cannot find any, it will break. The example at https://datatables.net/examples/plug-ins/dom_sort.html uses a table that has already been rendered. Here is an example using an API:
...columns([{
"data": "receivedDate",
"render": function (data, type, row, meta)
{
if (data == "null")
{
return "<input type='text' id='datepicker_" + meta.row + "' class='datepicker form-control' /><span class='hidden'><span>";
}
else
{
return "<input type='text' id='datepicker_" + meta.row + "' class='datepicker form-control' value='" + moment(data).format("MM/DD/YYYY") + "'/><span class='hidden'>" + moment(data).format('MM/ DD / YYYY') + "</span>";
}
}
}]);
Set an invisible div with the value before the input field.
<tbody>
<tr id="row_20" class="odd">
<td id="refKey_20" style="text-align:center;" class="">
1Y
</td>
<td class=" sorting_1">
<div style="display:none;">160</div>
<input type="text" value="160" size="3" name="item.Order"
maxlength="3" id="Order_20" >
</td>
</tr>
<tr id="row_19" class="even">
<td id="refKey_19" style="text-align:center;" class="">
1X
</td>
<td class=" sorting_1">
<div style="display:none;">150</div>
<input type="text" value="150" size="3" name="item.Order"
maxlength="3" id="Order_19" >
</td>
</tr>
</tbody>