Home Update Two jQuery Datatables with one button click
Reply: 0

Update Two jQuery Datatables with one button click

NoBullMan
1#
NoBullMan Published in 2018-01-12 19:01:52Z

I have a .Net application (C#) and added a jQuery data table using ajax and web services and it works fine. Table data updates on a button click.

I need to add a new table and need to have both tables updated on the same button click. I am not sure how to approach when it comes to setting ajax url or data parameters.

<div runat="server" id="divFacCert" ClientIDMode="Static" style="padding:15px">
    <div class="table-responsive">
        <table id="tblFacCert" class="table table-striped table-bordered table-hover table-responsive">
            <thead>
                <tr class="info">
                    <th>Area</th>
                    <th>District</th>
                    <th>Facility</th>
                    <th>Response Due Date</th>
                    <th>Completed On</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</div>

<div runat="server" id="divStats" ClientIDMode="Static" style="padding:15px">
    <div class="table-responsive">
        <table id="tblStats" class="table table-striped table-bordered table-hover table-responsive">
            <thead>
                <tr class="info">
                    <th>Area</th>
                    <th>Certified</th>
                    <th>Not Certified </th>
                    <th>% Certified</th>
                </tr>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</div>

<script>
    Table = $("#tblFacCert").DataTable({
        jQueryUI: true,
        data: [],
        dom: 'lfrtip',
        stateSave: true,
        "columns": [
            {
                "data": "Area"
            }, {
                "data": "District"
            },{
                "data": "FacilityName"
            },{
                "data": "ResponseDueDate",
            }, {
                "data": "Completed"
            }
        ],
        "pageLength": 15,
        processing: true
    });

    Table2 = $("#tblStats").DataTable({
        data: [],
        dom: 'lfrtip',
        stateSave: true,
        "columns": [
            {
                "data": "Area"
            }, {
                "data": "Cnt_Certified"
            }, {
                "data": "Cnt_NotCertified"
            }, {
                "data": "Percentage_cert"
            }
        ],
        "pageLength": 15,
        processing: true
    });

    $("#btnSubmit").on("click", function (event) {
        $.ajax({
            type: "POST",
            dataType: "json",
            contentType: "application/json; charset=utf-8",
            /* This url is used for first data table */
            url: "../services/easg.asmx/GetComplianceReportData",
            cache: false,
            /* This parameter list is used for first data table */
            data: "{ 'startDate': '" + $("#tbStartDate").val() + "', 'certID': '" + $('#ddlCertificate').val() + "'}"
        }).done(function (result) {
            Table.clear().draw();
            jResult = JSON.parse(result.d);
            Table.rows.add(jResult).draw();
        }).fail(function (jqXHR, textStatus, errorThrown) {
            alert(textStatus + ' - ' + errorThrown);
        });
    })
</script>
You need to login account before you can post.

About| Privacy statement| Terms of Service| Advertising| Contact us| Help| Sitemap|
Processed in 0.334216 second(s) , Gzip On .

© 2016 Powered by mzan.com design MATCHINFO