Code:
<div>
<input type = "text"
id = "edtFirstName" />
<input type = "text"
id = "edtLastName" />
<input type = "text"
id = "edtGender" />
<input type = "text"
id = "edtJobTitle"/>
<a href="#" class="btn btn-success" id="btnSearch">Search</a>
<a href="#" class="btn btn-success" id="btnGenerateReport">Generate Report</a>
</div>
@section scripts{
<script type="text/javascript">
$(function() {
$('#btnSearch').on("click",
function (e) {
var firstName = $("#edtFirstName").val();
var lastName = $("#edtLastName").val();
var gender = $("#edtGender").val();
var jobTitle = $("#edtJobTitle").val();
e.preventDefault();
$.ajaxSetup({ cache: false });
$.ajax({
data: { pFirstName: firstName, pLastName: lastName, pGender: gender, pJobTitle: jobTitle },
url: '@Url.Action("GetResult", "Home")',
type: "GET",
dataType: "json",
cache: false,
success: function(response) {
var $table = $('#t01');
if (response) {
$('#t01').empty(); // empty previous data
$table.append("<table id=\"t01\" class=\"fromTable\">" + //create table header
"<tr colspan=\"2\" class=\"sectionHeading\" style=\"text-align: left; background-color: #425171\">" +
"<td style=\"color: white\"><strong>First Name</strong></td>" +
"<td style=\"color: white\"><strong>Last Name</strong></td>" +
"<td style=\"color: white\"><strong>Gender</strong></td>" +
"<td style=\"color: white\"><strong>Job Title</strong></td>" +
"</tr></table>");
response.forEach(function(el) {
$table.append("<tr><td id=\"colFirstName\">" +
el.FirstName +
"</td>" +
"<td id=\"colLastName\">" +
el.LastName +
"</td>" +
"<td id=\"colGender\">" +
el.Gender +
"</td>" +
"<td id=\"colJobTitle\">" +
el.JobTittle +
"</td></tr>");
});
//ovo su moi pokusaji neupesni pokusai :)
var test = $('#t01 td');
$("#edtFirstName").style.width = $('#colFirstName'). style.width;
$("#edtLastName").style.width = $('#colLasName').style.width();
$("#pGender").style.width = $('#colGender').style.width();
$("#pJobTitle").style.width = $('#colJobTitle').style.width();
}
}
});
});
});
</script>
<div>
<input type = "text"
id = "edtFirstName" />
<input type = "text"
id = "edtLastName" />
<input type = "text"
id = "edtGender" />
<input type = "text"
id = "edtJobTitle"/>
<a href="#" class="btn btn-success" id="btnSearch">Search</a>
<a href="#" class="btn btn-success" id="btnGenerateReport">Generate Report</a>
</div>
@section scripts{
<script type="text/javascript">
$(function() {
$('#btnSearch').on("click",
function (e) {
var firstName = $("#edtFirstName").val();
var lastName = $("#edtLastName").val();
var gender = $("#edtGender").val();
var jobTitle = $("#edtJobTitle").val();
e.preventDefault();
$.ajaxSetup({ cache: false });
$.ajax({
data: { pFirstName: firstName, pLastName: lastName, pGender: gender, pJobTitle: jobTitle },
url: '@Url.Action("GetResult", "Home")',
type: "GET",
dataType: "json",
cache: false,
success: function(response) {
var $table = $('#t01');
if (response) {
$('#t01').empty(); // empty previous data
$table.append("<table id=\"t01\" class=\"fromTable\">" + //create table header
"<tr colspan=\"2\" class=\"sectionHeading\" style=\"text-align: left; background-color: #425171\">" +
"<td style=\"color: white\"><strong>First Name</strong></td>" +
"<td style=\"color: white\"><strong>Last Name</strong></td>" +
"<td style=\"color: white\"><strong>Gender</strong></td>" +
"<td style=\"color: white\"><strong>Job Title</strong></td>" +
"</tr></table>");
response.forEach(function(el) {
$table.append("<tr><td id=\"colFirstName\">" +
el.FirstName +
"</td>" +
"<td id=\"colLastName\">" +
el.LastName +
"</td>" +
"<td id=\"colGender\">" +
el.Gender +
"</td>" +
"<td id=\"colJobTitle\">" +
el.JobTittle +
"</td></tr>");
});
//ovo su moi pokusaji neupesni pokusai :)
var test = $('#t01 td');
$("#edtFirstName").style.width = $('#colFirstName'). style.width;
$("#edtLastName").style.width = $('#colLasName').style.width();
$("#pGender").style.width = $('#colGender').style.width();
$("#pJobTitle").style.width = $('#colJobTitle').style.width();
}
}
});
});
});
</script>
Kude tumbe i tri bandere