I populate this table from an API and try to do a multiple lookup filter from one entry separating each entry by a comma.
they load the data correctly but when trying to search it does nothing
Is this code any good or how could I do a multiple search from one input?
View
File ApiControllers.js
<script>
var testApp = angular.module("LogModule", []);
testApp.controller("TransController", function ($scope, $http) {
$http.get('/api/Trans').then(function (response) {
$scope.logTrans = response.data;
$scope.Show = [];
$scope.separator = ""
$scope.buscar = function () {
let search = $scope.separator.split(",");
$scope.Show =
$scope.logTrans
.filter((item) => {
let a = search.map((value) => {
return JSON.stringify(item)
.toUpperCase()
.indexOf(value.toUpperCase()) > -1 ? 1 : 0;
}).reduce((x, y) => x + y);
return a > 0
})
}
$scope.searchInput()
});
});
File html
<!DOCTYPE html>
<html ng-app="LogModule">
<head>
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/ApiCotrollers.js"></script>
<link />
</head>
<body>
<h1>Consulta de transacciones</h1>
<div ng-app="LogModule" class="table-responsive" ng-controller="TransController">
<input type="text" ng-model="filter" ng-change="searchInput()" class="form-control" placeholder="Buscar documentos" aria-describedby="basic-addon2 ">
<br>
<table class="table table-bordered table-hover" align="center">
<tr class="active">
<th> Registro</th>
<th> FechaInsert</th>
<th> FechaModificacion</th>
<th>Observaciones</th>
<th> IdIntegracion</th>
<th>Integrado</th>
<th> Error</th>
<th>ObjetoIntegracion</th>
<th> Bodega</th>
</tr>
<tr ng-repeat=" p in Show track by $index">
<td class="success"> {{p.Registro}}</td>
<td class="success"> {{p.FechaInsert}} </td>
<td class="success"> {{p.FechaModificacion}} </td>
<td class="danger"> {{p.Observaciones}} </td>
<td class="success">{{p.IdIntegracion}} </td>
<td class="success"> {{p.Integrado}} </td>
<td class="success"> {{p.Error}} </td>
<td class="danger"> {{p.ObjetoIntegracion}}</td>
<td class="success">{{p.Bodega}}</td>
</tr>
</table>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
</body>
</html>
Related
I am checking two check boxes in first table those records are adding in second table this is fine. But if unchecked record removing as improper way, how can I remove exact row I unchecked.
var app = angular.module('myApp',[]);
app.controller("homeCtrl", function($scope) {
$scope.items = [{
itemID: 'BR063',
itemValue: 'sagsfgjkfdsffsdfsd'
}, {
itemID: 'BR06417',
itemValue: '1231231231123'
}];
$scope.selectedItems = [];
$scope.addRec = function(result, i){
if(result == true){
$scope.selectedItems.push($scope.items[i-1]);
}
else{
$scope.selectedItems.splice($scope.items[i],1);
}
}
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
<div ng-app = 'myApp' ng-controller="homeCtrl">
<h1>Select Rows</h1>
<table style="width:50%" class="table-responsive table-bordered ">
<tr>
<th class="text-center">Index</th>
<th class="text-center">Item ID</th>
<th class="text-center">Item Values</th>
<th class="text-center">Select</th>
</tr>
<tr ng-repeat="x in items">
<td class="text-center">{{$index+1}}</td>
<td class="text-center">{{x.itemID}}</td>
<td class="text-center">{{x.itemValue}}</td>
<td class="text-center"><input type="checkbox" ng-model="itsVal" ng-change = "addRec(itsVal, $index+1)";/></td>
</tr>
</table>
<h1>Selected Rows</h1>
<table style="width:50%" class="table-responsive table-bordered ">
<tr>
<th class="text-center">Index</th>
<th class="text-center">Item ID</th>
<th class="text-center">Item Values</th>
<th class="text-center">Select</th>
</tr>
<tr ng-repeat="x in selectedItems">
<td class="text-center">{{$index+1}}</td>
<td class="text-center">{{x.itemID}}</td>
<td class="text-center">{{x.itemValue}}</td>
<td class="text-center"><input type="checkbox" /></td>
</tr>
</table>
<div>
You just need to do $scope.selectedItems.splice(i-1, 1); in the else block. Also since result is a boolean value you can simply use if (result) in the condition:
var app = angular.module('myApp', []);
app.controller("homeCtrl", function($scope) {
$scope.items = [{
itemID: 'BR063',
itemValue: 'sagsfgjkfdsffsdfsd'
}, {
itemID: 'BR06417',
itemValue: '1231231231123'
}];
$scope.selectedItems = [];
$scope.addRec = function(result, i) {
if (result) {
$scope.selectedItems.push($scope.items[i - 1]);
} else {
$scope.selectedItems.splice(i-1, 1);
}
}
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
<div ng-app='myApp' ng-controller="homeCtrl">
<h1>Select Rows</h1>
<table style="width:50%" class="table-responsive table-bordered ">
<tr>
<th class="text-center">Index</th>
<th class="text-center">Item ID</th>
<th class="text-center">Item Values</th>
<th class="text-center">Select</th>
</tr>
<tr ng-repeat="x in items">
<td class="text-center">{{$index+1}}</td>
<td class="text-center">{{x.itemID}}</td>
<td class="text-center">{{x.itemValue}}</td>
<td class="text-center"><input type="checkbox" ng-model="itsVal" ng-change="addRec(itsVal, $index+1)" ;/></td>
</tr>
</table>
<h1>Selected Rows</h1>
<table style="width:50%" class="table-responsive table-bordered ">
<tr>
<th class="text-center">Index</th>
<th class="text-center">Item ID</th>
<th class="text-center">Item Values</th>
<th class="text-center">Select</th>
</tr>
<tr ng-repeat="x in selectedItems">
<td class="text-center">{{$index+1}}</td>
<td class="text-center">{{x.itemID}}</td>
<td class="text-center">{{x.itemValue}}</td>
<td class="text-center"><input type="checkbox" /></td>
</tr>
</table>
<div>
The issue here is that you are trying to remove via index rather than using the id. Have made some changes in the addRec function and the line in html invoking it. Please go through them once:
var app = angular.module('myApp',[]);
app.controller("homeCtrl", function($scope) {
$scope.items = [{
itemID: 'BR063',
itemValue: 'sagsfgjkfdsffsdfsd'
}, {
itemID: 'BR06417',
itemValue: '1231231231123'
}];
$scope.selectedItems = [];
$scope.addRec = function(result, i,itemId){
if(result == true){
$scope.selectedItems.push($scope.items[i-1]);
}
else{
var index=0;
var isMatched = false;
angular.forEach($scope.selectedItems,function(item) {
if(isMatched === false) {
if(item.itemID === itemId) {
isMatched = true;
}
else {
index++;
}
}
});
$scope.selectedItems.splice(index,1);
}
}
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
<div ng-app = 'myApp' ng-controller="homeCtrl">
<h1>Select Rows</h1>
<table style="width:50%" class="table-responsive table-bordered ">
<tr>
<th class="text-center">Index</th>
<th class="text-center">Item ID</th>
<th class="text-center">Item Values</th>
<th class="text-center">Select</th>
</tr>
<tr ng-repeat="x in items track by x.itemID">
<td class="text-center">{{$index+1}}</td>
<td class="text-center">{{x.itemID}}</td>
<td class="text-center">{{x.itemValue}}</td>
<td class="text-center"><input type="checkbox" ng-model="itsVal" ng-change = "addRec(itsVal, $index+1,x.itemID)";/></td>
</tr>
</table>
<h1>Selected Rows</h1>
<table style="width:50%" class="table-responsive table-bordered ">
<tr>
<th class="text-center">Index</th>
<th class="text-center">Item ID</th>
<th class="text-center">Item Values</th>
<th class="text-center">Select</th>
</tr>
<tr ng-repeat="x in selectedItems track by x.itemID">
<td class="text-center">{{$index+1}}</td>
<td class="text-center">{{x.itemID}}</td>
<td class="text-center">{{x.itemValue}}</td>
<td class="text-center"><input type="checkbox" /></td>
</tr>
</table>
<div>
Just create a directive as you don't need to repeat the code for table rendering, and use a filter to sort out the selected rows!
var app = angular.module('myApp', []);
app.directive("tableRenderer", function(){
return {
restrict: 'E',
template: `
<table style="width:50%" class="table-responsive table-bordered ">
<tr>
<th class="text-center">Index</th>
<th class="text-center">Item ID</th>
<th class="text-center">Item Values</th>
<th class="text-center">Select</th>
</tr>
<tr ng-repeat="x in list | filter:filter">
<td class="text-center">{{$index+1}}</td>
<td class="text-center">{{x.itemID}}</td>
<td class="text-center">{{x.itemValue}}</td>
<td class="text-center"><input type="checkbox" ng-model="x.selected" ;/></td>
</tr>
</table>
`,
scope: {
list: '=',
filter: '='
},
link: function(scope, elem, attr) {
}
}
})
app.controller("homeCtrl", function($scope) {
$scope.items = [{
itemID: 'BR063',
itemValue: 'sagsfgjkfdsffsdfsd',
selected: false
}, {
itemID: 'BR06417',
itemValue: '1231231231123',
selected: false
}];
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular-route.js"></script>
<div ng-app='myApp' ng-controller="homeCtrl">
<h1>Select Rows</h1>
<table-renderer list="items"></table-renderer>
<h1>Selected Rows</h1>
<table-renderer list="items" filter="{selected: true}"></table-renderer>
<div>
I've recently started using KnockOut, so I'm very new to this.
I have completed every tutorial on their site, yet can't get this specific thing to work.
I have to arrays, on the left being all the items, on the right being the items you've selected.
Once you click on the item (left table), it should .push to the right table
ViewModel:
var orderedItemsTable = $("form.orderedDataWithoutBatch")
var viewModel = {
//right side
orderedItems: ko.observableArray(),
//Left side
items: ko.observableArray(),
sortColumn: ko.observable(),
total: ko.observable(),
}
request.done(function (data) {
item.addItem = function () {
alert("item clicked, materiaal id: " + this.MateriaalId);//works
alert(this.MateriaalDescription);//works
viewModel.orderedItems.push(this);//doesn't 'work'
}
viewModel.items.push(item);//unrelated to this context
}
I'm assuming it's either in this code here, or I'm not showing it correctly in my html (because I'm not getting any console errors)
HTML (right side)
<form id="OrderedItemsWithoutBatch" class="orderedDataWithoutBatch">
<table class="orderFormArticlesTable" style="width: 47%;float: right; font-size: 9pt;">
<thead>
<tr>
<th>SKU</th>
<th>Product</th>
<th style="width: 15%">Qty</th>
<th></th>
</tr>
</thead>
<tbody data-bind="foreach: orderedItems">
<tr>
<td data-bind="text: MateriaalSku"> </td>
<td data-bind="text: MateriaalDescription"> </td>
<td data-bind="text: MateriaalId"><!-- Quantity--> </td>
<!--<td><input class="orderedQty" style="max-width: 15%" value="1" />[pieces]</td>-->
<td>Remove</td>
</tr>
</tbody>
</table>
I'm not sure I've understood you right, but I'd solve your task this way:
var orderedItemsTable = $("form.orderedDataWithoutBatch")
var viewModel = {
//right side
orderedItems: ko.observableArray(),
//Left side
items: ko.observableArray(),
sortColumn: ko.observable(),
total: ko.observable(),
}
function proscessRequest(item) {
item.addItem = function () {
//alert("item clicked, materiaal id: " + this.MateriaalId);//works
//alert(item.MateriaalDescription);//works
viewModel.orderedItems.push(this);//doesn't 'work'
}
viewModel.items.push(item);//unrelated to this context
}
ko.applyBindings(viewModel);
proscessRequest({MateriaalSku: "M1", MateriaalDescription: "D1", MateriaalId: "1"});
proscessRequest({MateriaalSku: "M2", MateriaalDescription: "D2", MateriaalId: "2"});
proscessRequest({MateriaalSku: "M3", MateriaalDescription: "D3", MateriaalId: "3"});
proscessRequest({MateriaalSku: "M4", MateriaalDescription: "D4", MateriaalId: "4"});
<script src="https://cdnjs.cloudflare.com/ajax/libs/knockout/3.2.0/knockout-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<form id="OrderedItemsWithoutBatch" class="orderedDataWithoutBatch">
<div>Alavilable items:</div>
<div>
<table class="orderFormArticlesTable">
<thead>
<tr>
<th>SKU</th>
<th>Product</th>
<th style="width: 15%">Qty</th>
<th></th>
</tr>
</thead>
<tbody data-bind="foreach: items">
<tr>
<td data-bind="text: MateriaalSku"> </td>
<td data-bind="text: MateriaalDescription"> </td>
<td data-bind="text: MateriaalId"><!-- Quantity--> </td>
<td><div data-bind="click: addItem">Add</div></td>
</tr>
</tbody>
</table>
</div>
<div style="margin-top: 30px;">
<div>Ordered items:</div>
<table class="orderFormArticlesTable">
<thead>
<tr>
<th>SKU</th>
<th>Product</th>
<th style="width: 15%">Qty</th>
<th></th>
</tr>
</thead>
<tbody data-bind="foreach: orderedItems">
<tr>
<td data-bind="text: MateriaalSku"> </td>
<td data-bind="text: MateriaalDescription"> </td>
<td data-bind="text: MateriaalId"><!-- Quantity--> </td>
<td><div data-bind="click: function() { $parent.orderedItems.remove($data); }">Remove</div></td>
</tr>
</tbody>
</table>
</div>
</form>
Note
I've mocked request with "proscessRequest" function called after bindings have been applied.
I would like some help not modifying this code
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function fillHidTable(){
var htqf; //-- hidden field
var rf; //-- retrieved field
for ( var i = 1; i < 5; i++ ) {
rf = "htqf"+i;
document.getElementById(rf).innerHTML = document.getElementById("Q"+i+"CALC").value;
}
tableToExcel('hidTable', 'Analysis Results');
}
var tableToExcel = (function() {
var uri = 'data:application/vnd.ms-excel;base64,'
, template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>'
, base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) }
, format = function(s, c) { return s.replace(/{(\w+)}/g, function(m, p) { return c[p]; }) }
return function(table, name) {
if (!table.nodeType) table = document.getElementById(table)
var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML}
window.location.href = uri + base64(format(template, ctx))
}
})()
</script>
<title>HTML Form Data to Excel</title>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style type="text/css" media="screen">
.divCenMid{font-family:Arial,sans-serif;font-size:14pt;font-style:normal;font-weight:700;text-align:center;vertical-align:middle;margin:0;}
.allbdrCenMid{border:.75pt solid windowtext;color:#000;font-family:Arial,sans-serif;font-size:10pt;font-style:normal;font-weight:400;text-align:center;vertical-align:middle;margin:0;}
.allbdrCenTop{border:.75pt solid windowtext;color:#000;font-family:Arial,sans-serif;font-size:10pt;font-style:normal;font-weight:400;text-align:center;vertical-align:top;margin:0;}
.allbdrLtMid{border:.75pt solid windowtext;color:#000;font-family:Arial,sans-serif;font-size:10pt;font-style:normal;font-weight:400;text-align:left;vertical-align:middle;margin:0;}
.allbdrLtTop{border:.75pt solid windowtext;color:#000;font-family:Arial,sans-serif;font-size:10pt;font-style:normal;font-weight:400;text-align:left;vertical-align:top;margin:0;}
</style>
</head>
<body>
<table width= "565px" cellspacing="0" cellpadding="0" style="border-spacing:0;" id="QMSTable">
<col width="25px"/>
<col width="120px"/>
<col width="360px"/>
<col width="60px"/>
<tr>
<td class="divCenMid" colspan = "4"> QMS Assessment</td>
</tr>
<tr>
<td class="allbdrCenMid"> No</td>
<td class="allbdrCenMid"> Criteria</td>
<td class="allbdrLtMid"> Question</td>
<td class="allbdrCenMid"> Score</td>
</tr>
<tr>
<td class="allbdrCenTop"> Q1</td>
<td class="allbdrLtTop"> Quality Unit Independency</td>
<td class="allbdrLtTop"> Do you have the Quality Unit?</td>
<td class="allbdrCenMid">
<input id="Q1CALC" type="text" value="" class="nobdrCenMid" style="overflow:hidden; width:93% " name="Q1CALC"/>
</td>
</tr>
<tr>
<td class="allbdrCenTop"> Q2</td>
<td class="allbdrLtTop"> Apply PICS GMP</td>
<td class="allbdrLtTop"> Which GMP regulation do you use?</td>
<td class="allbdrCenMid">
<input id="Q2CALC" type="text" value="" class="nobdrCenMid" style="overflow:hidden; width:93% " name="Q2CALC"/>
</td>
</tr>
<tr>
<td class="allbdrCenTop"> Q3</td>
<td class="allbdrLtTop"> Deviation or Non-conformance</td>
<td class="allbdrLtTop"> Do you have a deviation or non-conformance procedure?</td>
<td class="allbdrCenMid">
<input id="Q3CALC" type="text" value="" class="nobdrCenMid" style="overflow:hidden; width:93% " name="Q3CALC"/>
</td>
</tr>
<tr>
<td class="allbdrCenTop"> Q4</td>
<td class="allbdrLtTop"> Complaint</td>
<td class="allbdrLtTop"> Do you have a customer complaint procedure?</td>
<td class="allbdrCenMid">
<input id="Q4CALC" type="text" value="" class="nobdrCenMid" style="overflow:hidden; width:93% " name="Q4CALC"/>
</td>
</tr>
</table>
<div id="hidTable" style="display: none">
<table id="testTable">
<caption>Supplier Risk Analysis</caption>
<colgroup></colgroup>
<colgroup></colgroup>
<colgroup></colgroup>
<thead>
<tr>
<th>No.</th>
<th>Question</th>
<th>Score</th>
</tr>
</thead>
<tbody>
<tr>
<td>Q1</td>
<td>Do you have the Quality Unit?</td>
<td id="htqf1">-</td>
</tr>
<tr>
<td>Q2</td>
<td>Apply PICS GMP?</td>
<td id="htqf2">-</td>
</tr>
<tr>
<td>Q3</td>
<td>Do you have a deviation or non-conformance procedure?</td>
<td id="htqf3">-</td>
</tr>
<tr>
<td>Q4</td>
<td>Do you have a customer complaint procedure?</td>
<td id="htqf4">-</td>
</tr>
</tbody>
</table>
</div>
<input type="button" onclick="fillHidTable()" name=PatientDatabase value="Export Data to Excel">
</body>
</html>
It makes a web based form which I can play with and edit, but is there a way I can just change the last button to save the excel table into cells to make more of a database and is there a way I can save it to a specific file and to have it fill in or append the data.
you can convert HTML div to excel
var tableToExcel = (function() {
var uri = 'data:application/vnd.ms-excel;base64,'
, template = '<html xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:x="urn:schemas-microsoft-com:office:excel" xmlns="http://www.w3.org/TR/REC-html40"><head><!--[if gte mso 9]><xml><x:ExcelWorkbook><x:ExcelWorksheets><x:ExcelWorksheet><x:Name>{worksheet}</x:Name><x:WorksheetOptions><x:DisplayGridlines/></x:WorksheetOptions></x:ExcelWorksheet></x:ExcelWorksheets></x:ExcelWorkbook></xml><![endif]--></head><body><table>{table}</table></body></html>'
, base64 = function(s) { return window.btoa(unescape(encodeURIComponent(s))) }
, format = function(s, c) { return s.replace(/{(\w+)}/g, function(m, p) { return c[p]; }) }
return function(table, name) {
if (!table.nodeType) table = document.getElementById(table)
var ctx = {worksheet: name || 'Worksheet', table: table.innerHTML}
window.location.href = uri + base64(format(template, ctx))
}
})()
I am new bie on knockout js.i create a crud operation one page app in which you click on add field a form appear you add the data and click on add button it add the data and if you click on save button it show the data in json format but when i am clicking on my save button i just want to save the data which is in form at that time not the whole data.i am able to do this functionality on click of delete but dont know how to perform on click of save here is whole structure
<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="knockout-3.1.0.js"></script>
</head>
<body>
<table style="width:100%;" data-bind="visible:showFields">
<tbody>
<tr>
<th style="width:100px;">Branch </th>
<th style="width:100px;">Enter Value</th>
</tr>
</tbody>
<tr>
<td>Branch ID (int):</td>
<td>
<input data-bind="value: BranchId" />
</td> <!--,valueUpdate:'keypress'-->
</tr>
<tr>
<td>Name :</td>
<td>
<input data-bind="value: Name" /></td>
</tr>
<tr>
<td>Description :</td>
<td>
<input data-bind="value: Description" /></td>
</tr>
<tr>
<td>Template :</td>
<td>
<select data-bind="options: Templates, value:
Template, optionsCaption: 'Select Template...'"></select></td>
</tr>
<tr>
<td>MetaKeyword :</td>
<td>
<input data-bind="value: MetaKeyword" /></td>
</tr>
<tr>
<td>MetaDescription :</td>
<td>
<input data-bind="value: MetaDescription" /></td>
</tr>
<tr>
<td>MetaTitle :</td>
<td>
<input data-bind="value: MetaTitle" /></td>
</tr>
<tr>
<td>EnableSearch :</td>
<td>
<select data-bind="options: EnableSearchs, value:
EnableSearch, optionsCaption: 'Select Search...'"></select>
</td>
</tr>
<tr>
<td colspan="3">
<button type="button" data-bind="click:
AddBranch">Add Branch</button>
<button type="button" data-bind="click:
SaveBranch">Save Branch</button>
</td>
</tr>
</table>
</div>
<div style="width:70%;float:left;display:inline-block;" data-bind="visible:show">
<h2>List of Branches</h2>
<table style="width:100%;" data-bind="visible: Branches().length > 0" border="0">
<tr>
<th>Branch Id</th>
<th>First Name</th>
<th>Last Name</th>
<th>Template</th>
<th>MetaKeyword</th>
<th>MetaDescription</th>
<th>MetaTitle</th>
<th>EnableSearch</th>
</tr>
<tbody data-bind="foreach: Branches">
<tr>
<td><span data-bind="text: BranchId" /></td>
<td>
<span data-bind="text: Name" /></td>
<td>
<span data-bind="text: Description" /></td>
<td>
<select data-bind="options: $root.Templates,
value: Template"></select></td>
<td>
<span data-bind="text: MetaKeyword" /></td>
<td>
<span data-bind="text: MetaDescription" /></td>
<td>
<span data-bind="text: MetaTitle" />
</td>
<td>
<select data-bind="options: $root.EnableSearchs,
value: EnableSearch"></select>
</td>
<td><a href="#" data-bind="click: $root.
DeleteBranch">Delete</a></td>
<td>edit</td>
</tr>
</tbody>
</table>
AddFields
</div>
</body>
<script>
function Branch(data) {
this.BranchId = ko.observable(data.BranchId);
this.Name = ko.observable(data.Name);
this.Description = ko.observable(data.Description);
this.Template = ko.observable(data.Template);
this.MetaKeyword = ko.observable(data.MetaKeyword);
this.MetaDescription = ko.observable(data.MetaDescription);
this.MetaTitle = ko.observable(data.MetaTitle);
this.EnableSearch = ko.observable(data.EnableSearch);
}
function BranchViewModel() {
var self = this;
self.EnableSearchs = ko.observableArray(['Yes', 'No']);
self.Templates = ko.observableArray(['Template1', 'Template2']);
self.Branches = ko.observableArray([]);
self.BranchId = ko.observable();
self.Name = ko.observable();
self.Description = ko.observable();
self.MetaKeyword = ko.observable();
self.MetaDescription = ko.observable();
self.MetaTitle = ko.observable();
self.EnableSearch = ko.observable();
self.Template = ko.observable();
self.editBranch = ko.observable();
self.show = ko.observable(true);
self.showFields = ko.observable(false);
self.flag = ko.observable(false);
self.AddBranch = function () {
if (self.flag()) {
self.editBranch().BranchId(self.BranchId())
self.editBranch().Name(self.Name())
self.editBranch().Description(self.Description())
self.editBranch().EnableSearch(self.EnableSearch())
self.editBranch().MetaKeyword(self.MetaKeyword())
self.editBranch().MetaDescription(self.MetaDescription())
self.editBranch().MetaTitle(self.MetaTitle())
self.editBranch().Template(self.Template())
self.flag(false);
self.show(true);
self.showFields(false);
self.BranchId(""),
self.Name(""),
self.Description(""),
self.EnableSearch(""),
self.MetaKeyword(""),
self.MetaDescription(""),
self.MetaTitle(""),
self.Template("")
}
else{
self.Branches.push(new Branch({
BranchId: self.BranchId(),
Name: self.Name(),
Description: self.Description(),
EnableSearch: self.EnableSearch(),
MetaKeyword: self.MetaKeyword(),
MetaDescription: self.MetaDescription(),
MetaTitle: self.MetaTitle(),
Template: self.Template()
}));
self.BranchId(""),
self.Name(""),
self.Description(""),
self.EnableSearch(""),
self.MetaKeyword(""),
self.MetaDescription(""),
self.MetaTitle(""),
self.Template("")
self.show(true);
self.showFields(false);
}
};
self.AddField = function(){
self.show(false);
self.showFields(true);
}
self.DeleteBranch = function (branch) {
alert(ko.toJSON({ data: branch }));
};
self.edit = function (branch) {
self.editBranch(branch);
self.show(false);
self.showFields(true);
self.BranchId(branch.BranchId());
self.Name(branch.Name());
self.Description(branch.Description());
self.EnableSearch(branch.EnableSearch());
self.MetaKeyword(branch.MetaKeyword());
self.MetaDescription(branch.MetaDescription());
self.MetaTitle(branch.MetaTitle());
self.Template(branch.Template());
self.flag(true);
}
self.SaveBranch = function (branch) {
alert(ko.toJSON( self.Branches));
};
}
$(document).ready(function () {
ko.applyBindings(new BranchViewModel());
});
</script>
</html>
secondly i want to display some json data on my page as my page get load. here is my json data.
[{"BranchId":"1","Name":"us","Description":"united states","Template":"Template1","MetaKeyword":"us","MetaDescription":"us","MetaTitle":"us","EnableSearch":"Yes"},{"BranchId":"2","Name":"europe","Description":"europe","Template":"Template1","MetaKeyword":"euro","MetaDescription":"euro","MetaTitle":"euro","EnableSearch":"Yes"},{"BranchId":"3","Name":"aus","Description":"aus","Template":"Template1","MetaKeyword":"aus","MetaDescription":"aus","MetaTitle":"aus","EnableSearch":"Yes"}]
Here's how you do it.. You need to convert each object from json to Branch. You can use computed for that.
Create new var for the JSON dataset
var dummyData = [{"BranchId":"1","Name":"us","Description":"united states","Template":"Template1","MetaKeyword":"us","MetaDescription":"us","MetaTitle":"us","EnableSearch":"Yes"},{"BranchId":"2","Name":"europe","Description":"europe","Template":"Template1","MetaKeyword":"euro","MetaDescription":"euro","MetaTitle":"euro","EnableSearch":"Yes"},{"BranchId":"3","Name":"aus","Description":"aus","Template":"Template1","MetaKeyword":"aus","MetaDescription":"aus","MetaTitle":"aus","EnableSearch":"Yes"}];
self.PopulateBranches = ko.computed(function(){
ko.utils.arrayForEach(dummyData, function(item){
self.Branches.push(new Branch(item));
});
});
Here's updated JSFiddle for you : http://jsfiddle.net/x2ubuy44/
I have Html code that generates a table that contains a lot of records.
Here is the code:
#model IEnumerable<UserContact>
#{
ViewBag.Title = "Contacts:";
}
<h2>
Contacts</h2>
<table>
<tr>
<th>
#Html.DisplayText("First Name")
</th>
<th>
#Html.DisplayText("First Name")
</th>
<th>
#Html.DisplayText("Email")
</th>
<th>
</th>
</tr>
#foreach (var item in Model)
{
<tr>
<td>
#Html.CheckBox("misha", new { onclick = "this.form.submit();" })
</td>
<td>
#Html.DisplayFor(modelItem => item.firstName)
</td>
<td>
#Html.DisplayFor(modelItem => item.lastName)
</td>
<td>
#Html.DisplayFor(modelItem => item.email)
</td>
</tr>
}
</table>
This code is contained in razor partial view page.
My question is how can I create paging in table that described above?
As per your comment i m showing complete example of datatable here :
Jquery and CSS References :-
Links :-
http://code.jquery.com/jquery-1.11.1.min.js
http://cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js
http://cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css
Your Partial View :-
#model IEnumerable<UserContact>
#{
ViewBag.Title = "Contacts:";
}
<h2>
Contacts</h2>
<table id="mydatatable">
<thead>
<tr>
<th>
#Html.DisplayText("First Name")
</th>
<th>
#Html.DisplayText("First Name")
</th>
<th>
#Html.DisplayText("Email")
</th>
<th>
</th>
</tr>
<thead>
<tbody>
#foreach (var item in Model)
{
<tr>
<td>
#Html.CheckBox("misha", new { onclick = "this.form.submit();" })
</td>
<td>
#Html.DisplayFor(modelItem => item.firstName)
</td>
<td>
#Html.DisplayFor(modelItem => item.lastName)
</td>
<td>
#Html.DisplayFor(modelItem => item.email)
</td>
</tr>
}
<tbody>
</table>
<script type="text/javascript">
$(document).ready(function(){
$('#mydatatable').dataTable();
});
</script>
Last but not the least don't forget to add references of required jquery files on your page.
//cdn.datatables.net/1.10.2/css/jquery.dataTables.min.css
//cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js
/////////////////////////////////////
<table id="myTable">
<tr>
<th>
#Html.DisplayText("First Name")
</th>
<th>
#Html.DisplayText("First Name")
</th>
<th>
#Html.DisplayText("Email")
</th>
<th>
</th>
</tr>
#foreach (var item in Model)
{
<tr>
<td>
#Html.CheckBox("misha", new { onclick = "this.form.submit();" })
</td>
<td>
#Html.DisplayFor(modelItem => item.firstName)
</td>
<td>
#Html.DisplayFor(modelItem => item.lastName)
</td>
<td>
#Html.DisplayFor(modelItem => item.email)
</td>
</tr>
}
</table>
<script type="text/javascript">
$(document).ready(function(){
$('#myTable').dataTable();
});
</script>