Hi RumeValid,
Refer below sample code.
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="//cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" />
<script type="text/javascript" src="//cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<script type="text/javascript">
$(function () {
var table = $('[id*=sample_2]').DataTable();
CalculateRowTotal();
$('input[type=search]').keyup(function () {
table.column(1).search($(this).val()).draw();
});
$('input[type=text]').on('keyup', function () {
CalculateRowTotal();
});
function CalculateRowTotal() {
$('#sample_2').find('tr:has(td)').each(function () {
var trs = $(this);
var tds = trs.find('td');
var cou = $(tds).find('[id*=txtcoursefee]').val() != "" ? $(tds).find('[id*=txtcoursefee]').val() : "0";
var acco = $(tds).find('[id*=txtaccomod]').val() != "" ? $(tds).find('[id*=txtaccomod]').val() : "0";
var trans = $(tds).find('[id*=txttranspot]').val() != "" ? $(tds).find('[id*=txttranspot]').val() : "0";
var feeding = $(tds).find('[id*=txtfeeding]').val() != "" ? $(tds).find('[id*=txtfeeding]').val() : "0";
var ot = $(tds).find('[id*=txtothercst]').val() != "" ? $(tds).find('[id*=txtothercst]').val() : "0";
$(tds).find('[id*=txttotcst]').val(parseInt(cou) + parseInt(acco) + parseInt(trans) + parseInt(feeding) + parseInt(ot));
});
}
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="tablecontainer" runat="server">
</div>
</form>
</body>
</html>
Namespaces
using System.Data;
Code
protected void Page_Load(object sender, EventArgs e)
{
if (!IsPostBack)
{
string strtHeader = "";
string strCloseTableTag = "</table>";
string strOpenTableTag = "<table class='hover compact order-column cell-border' cellspacing='0' width='100%' id='sample_2'>";
strtHeader = "<thead><tr>"
+ "<th>S/No</th>"
+ "<th>Staff ID</th>"
+ "<th>Surname</th>"
+ "<th>Othernames</th>"
+ "<th>Course Fee</th>"
+ "<th>Accomodation</th>"
+ "<th>Transport</th>"
+ "<th>Feeding</th>"
+ "<th>Other Cost</th>"
+ "<th>Total</th>"
+ "</tr></thead>"
+ "<tfoot><tr>"
+ "<th>S/No</th>"
+ "<th>Staff ID</th>"
+ "<th>Surname</th>"
+ "<th>Othernames</th>"
+ "<th>Course Fee</th>"
+ "<th>Accomodation</th>"
+ "<th>Transport</th>"
+ "<th>Feeding</th>"
+ "<th>Other Cost</th>"
+ "<th>Total</th>"
+ " </tr> </tfoot>";
string strOpenTBody = "<tbody>";
string strCloseTBody = "</tbody>";
string strTR = "";
string strFinalOutput = "";
DataTable dtSearch = new DataTable();
dtSearch.Columns.AddRange(new DataColumn[] {
new DataColumn("Sno", typeof(int)),new DataColumn("StaffId", typeof(string)),new DataColumn("Surname",typeof(string)),
new DataColumn("Othernames",typeof(string)), new DataColumn("CourseFee",typeof(int)), new DataColumn("Accomodation",typeof(int)),
new DataColumn("Transport",typeof(int)),new DataColumn("Feeding",typeof(int)),new DataColumn("Othercost",typeof(int))});
dtSearch.Rows.Add(711, "Staff 1", "Name 1", 12, 23, 45, 36, 75);
dtSearch.Rows.Add(800, "Staff 2", "Name 2", 0, 0, 0, 0, 0);
if (dtSearch.Rows.Count > 0)
{
for (int i = 0; i < dtSearch.Rows.Count; i++)
{
strTR = strTR + "<tr >"
+ "<td> " + " <span>" + (i + 1).ToString() + "</span> " + "</td>"
+ "<td> <span class='lblStaffID' id='lblStaffID" + (i + 1).ToString() + "'>" + dtSearch.Rows[i][0].ToString().Trim() + "</span></td>"
+ "<td> <span class='lblsurname' id='lblsurname" + (i + 1).ToString() + "'>" + dtSearch.Rows[i][1].ToString().Trim() + "</span></td>"
+ "<td> <span class='lblothernames' id='lblothernames" + (i + 1).ToString() + "'>" + dtSearch.Rows[i][2].ToString().Trim() + "</span></td>"
+ "<td> " + " <input name='txtcoursefee' value=" + dtSearch.Rows[i][3].ToString().Trim() + " type='text' id='txtcoursefee" + (i + 1).ToString().Trim() + "' class='txtcoursefee' style='width:100px;' /> " + "</td>"
+ "<td> " + " <input name='txtaccomod' value=" + dtSearch.Rows[i][4].ToString().Trim() + " type='text' id='txtaccomod" + (i + 1).ToString().Trim() + "' class='txtaccomod' style='width:100px;' /> " + "</td>"
+ "<td> " + " <input name='txttranspot' value=" + dtSearch.Rows[i][5].ToString().Trim() + " type='text' id='txttranspot" + (i + 1).ToString().Trim() + "' class='txttranspot' style='width:100px;' /> " + "</td>"
+ "<td> " + " <input name='txtfeeding' value=" + dtSearch.Rows[i][6].ToString().Trim() + " type='text' id='txtfeeding" + (i + 1).ToString().Trim() + "' class='txtfeeding' style='width:100px;' /> " + "</td>"
+ "<td> " + " <input name='txtothercst' value=" + dtSearch.Rows[i][7].ToString().Trim() + " type='text' id='txtothercst" + (i + 1).ToString().Trim() + "' class='txtothercst' style='width:100px;' /> " + "</td>"
+ "<td> " + " <input name='txttotcst' value=" + dtSearch.Rows[i][8].ToString().Trim() + " type='text' id='txttotcst" + (i + 1).ToString().Trim() + "' class='price_sum' style='width:100px;' disabled /> " + "</td>"
+ "</tr>";
}
strFinalOutput = strOpenTableTag + strtHeader + strOpenTBody + strTR.Trim() + strCloseTBody + strCloseTableTag;
}
else
{
strFinalOutput = "<div class='alert alert-info'>No List!.</div>";
}
dtSearch.Dispose();
if (strFinalOutput.Trim() != "")
{
if (strFinalOutput.ToUpper().Trim().Contains("NO LIST!."))
{
}
tablecontainer.InnerHtml = strFinalOutput;
}
}
}
Screenshot
