Calculate Row total while Searching in jQuery DataTable plugin

Last Reply 3 months ago By dharmendr

Posted 3 months ago

Hi, I have a table with a search bar, the addition of my textboxes work well, but when i search of a particular staffID, the addition doesn't work anymore. See My code on Js addition and code for the textboxes

            $(function () {
                $('input[type=text]').on('keyup', function () {
                    var trs = $(this).closest('tr');
                    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));
                });
            });

 

                    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' onkeypress='return validateFloatKeyPress(this, event)' 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' onkeypress='return validateFloatKeyPress(this, event)'  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' onkeypress='return validateFloatKeyPress(this, event)'  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' onkeypress='return validateFloatKeyPress(this, event)'  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' onkeypress='return validateFloatKeyPress(this, event)'  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' onkeypress='return validateFloatKeyPress(this, event)'  value=" + dtSearch.Rows[i][8].ToString().Trim() + " type='text' id='txttotcst" + (i + 1).ToString().Trim() + "' class='price_sum' style='width:100px;' disabled /> " + "</td>"
                        + "</tr>";

http://take.ms/GdsbR

You are viewing reply posted by: dharmendr 3 months ago.
Posted 3 months ago

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