Get (Retrieve) checked jQuery DataTable Row Input TextBox value using jQuery in ASP.Net

Last Reply 17 days ago By Eni

Posted 17 days ago

Hi,

i am struggling a few days to read value from the row. When row is selected, ther is input textbox with autosuggestion or user can input value.

I got all rows data from selected rows, but can not read value from input textbox.

Please, help

Thanks in advance

<script type="text/javascript">
    function GetTableValues() {
        DisplayWaitImage();
        var datum = $('#MainContent_DdllDatum').children("option").filter(":selected").text();
        var a = 1;
        if (datum == '%') {
            datum = "";
        };
        var table = $('#datatable').DataTable();
        //clear datatable
        table.clear().draw();
        //destroy datatable
        table.destroy();
        enisa(datum);
    }
</script>
<script type="text/javascript">
    function enisa(datum) {
        $.ajax({
            url: "Servisi.asmx/GetUPAssForJava", ///GetRecomendTransactionJava
            type: 'post',
            dataType: 'json',
            data: 'datum=' + datum,
            success: function (data) {
                var broj = data.length;
                document.getElementById("MainContent_LblCount").innerHTML = "Ukupno:" + broj;
                var s = 1;
                // alert(data.d);
                var dataTableInstance = $('#datatable').DataTable({
                    "dom": 'Bfrtip',
                    select: true,
                    "buttons": [
                    // 'excelHtml5',
                        {
                        extend: 'excelHtml5',
                        filename: function () {
                            var d = new Date();
                            var datum = d.getFullYear() + '-' + (d.getMonth() + 1) + '-' + d.getDate();
                            return 'Ultimate Parent - ' + datum;
                        }
                    },
                    'csvHtml5'],
                    'paging': true,
                    'pagingType': 'full_numbers',
                    'pageLength': 25,
                    'sort': true,
                    'searching': true,
                    'fixedHeader': true,
                    destroy: true,
                    data: data,
                    keys: true,
                    columns: [
                        { data: '',
                            defaultContent: '0',
                            visible: false
                        },
                        { data: '',
                            defaultContent: '',
                            orderable: false,
                            width: '20px',
                            className: 'select-checkbox',
                            targets: 1
                        },

                    { 'data': 'AssignorUP', 'width': '200px' },
                    { 'data': 'AssigneeUP', 'width': '200px' },
                    {
                        'data': 'ExecutionDate', 'width': '100px',
                        'render': function (jsonDate) {
                            var date = new Date(parseInt(jsonDate.substr(6)));
                            var month = date.getMonth() + 1;
                            return month + "/" + date.getDate() + "/" + date.getFullYear();
                        }
                    },
                    { 'data': 'TotalAssets', 'width': '20px'}],
                    select: {
                        style: 'multi',
                        selector: 'td:first-child'
                    }, order: [[2, 'asc']],
                    orderFixed: [0, 'desc']
                });

                $('#container').css('display', 'block');
                dataTableInstance.columns.adjust().draw();

                $('#datatable tfoot th').each(function () {
                    var title = $('#datatable thead th').eq($(this).index()).text();
                    $(this).html('<input type="text" class="sirina" placeholder ="' + title.trim() + '"/>');
                });

                dataTableInstance.columns().every(function () {
                    var datatableColumn = this;
                    $(this.footer()).find('input').on('keyup change', function () {
                        datatableColumn.search(this.value).draw();
                    });
                });

                $('#datatable ').on('click', 'td', function () {
                        //highlight selected row
                        const clickedTr = $(this).closest('tr');
                        var table = $('#datatable').DataTable();
                         
                        var cell = table.cell(this).data();
                        var kliknutaCell = table.cell(this).index().column;
                        // if (cell == "") {
                            if (kliknutaCell == 1) {

                        clickedTr.toggleClass('selected');
                        if (!clickedTr.hasClass('selected')) {
                            var b = clickedTr.find('select');
                            var tr = $(this).closest('tr');
                            var EeUP = tr.find('input[id=txtUPor2]').val();
                            var row = dataTableInstance.row(tr);
                            const rowMe = row.data();

                            const rowData = row.data();
                            rowData.AssigneeUP = EeUP;
                                                      
                            row.remove();
                            dataTableInstance.row.add(rowData).draw();
                        } else {
                        //grab current value of target cell
                        const currentCellValue = dataTableInstance.row(clickedTr).data().AssignorUP;
                            clickedTr.find('td:eq(2)').html("").append("<input type='text' id='txtUPor2'  class='txtUPor2' value='" + currentCellValue + "'>"); 
                        }    
                    }    
                    $("#txtUPor2").autocomplete({
                        minLength: 4,
                        source: function (request, response) {
                            $.ajax({
                                url: "Servisi.asmx/GetUP2",
                                type: 'post',
                                contentType: "application/json; charset=utf-8",
                                data: JSON.stringify({ company: request.term }),
                                dataType: 'json',
                                success: function (data) {
                                    response(data.d);
                                },
                                error: function (err) {
                                    alert(err);
                                }
                            })
                        }

                    });
                });
            },
            error: function (xhr, status, error) {
                var b = 2;
                alert(error);
            }
        });
    }
</script>
<script type="text/javascript">
    function GetTableValuesForUpdate() {
        var theArray = [];
        var myValues = $('#datatable').DataTable();
        var red = myValues.rows('.selected').indexes();
        var nesto = myValues.rows('.selected').data();
        var podaci = myValues.rows(red).data();
        for (var i = 0; i < podaci.length; i++) {

            var items = {};

            var AssignorUP = podaci[i].AssignorUP;
            if (podaci.length == 1) {
                var IzmjenaEE = $(this).attr("txtUPor2").value;
            }
            else {
                var IzmjenaEE = $(this).attr("txtUPor2")[i].value;
            }

            var date = new Date(parseInt(podaci[i].ExecutionDate.substr(6)));
            var month = date.getMonth() + 1;
            var datum = month + "/" + date.getDate() + "/" + date.getFullYear();
            items.ExecutionDate = datum;
            theArray.push(items);
            var ja = 2;
            var j = 8;
        }
        var me = 3;
        var a = JSON.stringify(theArray);
        document.getElementById("<%=CustomerJSON.ClientID %>").value = a;
    }
</script>

 

<div>
    <input id="CustomerJSON" type="hidden" runat="server" />
    <hr />
    <asp:Label ID="Label3" runat="server" Text="Check Ultimate Parents" CssClass="Naslov"
        Width="100%"></asp:Label>
    <hr />
    <table border="1" class="auto-style8">
        <tr>
            <th colspan="2" class="headerTabeleGornje">
                <asp:Label ID="Label1" runat="server" Text="Show data by:" CssClass="MyLabela"></asp:Label>
            </th>
            <th colspan="2" class="headerTabeleGornje">
                <asp:Label ID="Label2" runat="server" Text="Update data" CssClass="MyLabela"></asp:Label>
            </th>
        </tr>
        <tr>
            <td class="auto-style9">
                <asp:DropDownList ID="DdllDatum" runat="server" Width="140px" CssClass="myRedDropdownlist"
                    DataSourceID="sqlDatum" AppendDataBoundItems="True" DataTextField="datumImport"
                    DataValueField="datumImport">
                    <asp:ListItem Value="%"> </asp:ListItem>
                </asp:DropDownList>
            </td>
            <td class="auto-style13">
                <asp:Button ID="BtnAssUP0" runat="server" CssClass="dugmic" Height="37px" OnClientClick="GetTableValues(); return false;"
                    Text="Choose date of import" Width="204px" />
            </td>
            <td align="center" class="auto-style10">
                <asp:Label ID="LblCount" runat="server" CssClass="labelaRedBold" Height="16px" Width="265px"></asp:Label>
            </td>
            <td>
                <asp:Button ID="BtnUpdate" runat="server" CssClass="dugmicRed" OnClientClick="GetTableValuesForUpdate()"
                    OnClick="BtnUpdate_Click" Height="37px" Text="Update UP" />
            </td>
        </tr>
    </table>
</div>
<div id="enisa">
    <table id="datatable" class="display">
        <thead  >
            <tr >
                <th ></th>
                <th ></th>
                <th >Current UP Name</th>
                <th >New UP Name</th>
                <th >Import Date</th>
                <th >Count</th> 
            </tr>
        </thead>
        <tfoot >
            <tr >
                <th ></th>
                <th ></th>
                <th >Current UP Name</th>
                <th >New UP Name</th>
                <th >Import Date</th>
                <th >Count</th>
            </tr>
        </tfoot>
    </table>
</div>
<asp:SqlDataSource ID="sqlDatum" runat="server" ConnectionString="<%$ ConnectionStrings:conMA %>"
    SelectCommand="select distinct convert(char(10),a.datumImport,21) as datumImport FROM [trans] a with(nolock) order by datumImport desc">
</asp:SqlDataSource>
<div id="ModalPopup" style="visibility: hidden;">
    <div style="position: fixed; width: 100%; height: 100%; z-index: 10002; background-color: white;
        filter: alpha(opacity=70); opacity: 0.7;">
        &nbsp;
    </div>
    <table style="position: fixed; width: 100%; height: 100%; z-index: 10003;">
        <tr>
            <td align="center" valign="middle">
                <div style="color: Black; font-weight: bolder; background-color: White; padding: 15px;
                    width: 200px;">
                    <asp:Image ID="Image3" runat="server" ImageUrl="~/Images/wait_anim.gif" />
                </div>
            </td>
        </tr>
    </table>
</div>

 

You are viewing reply posted by: Eni 17 days ago.
Posted 17 days ago

Hi,

i solved my problem. I catch the cell, where is my input.

This work well with more inputs

    <script type="text/javascript">
        function GetTableValuesForUpdate() {
            var theArray = [];
            var myValues = $('#datatable').DataTable();
            var red = myValues.rows('.selected').indexes();    
            var nesto = myValues.rows('.selected').data();
            var podaci = myValues.rows(red).data();

            for(var i = 0; i < podaci.length; i++)
            {
                var items = {};
                var AssignorUP = podaci[i].AssignorUP;
                var pozicija = red[i];
                var AssigneeUP = myValues.cell(pozicija, 3).nodes().to$().find('input[id=txtUPor2]').val();
                items.AssignorUP = AssignorUP;
                items.AssigneeUP = AssigneeUP;
               
                var date = new Date(parseInt(podaci[i].ExecutionDate.substr(6)));
                var month = date.getMonth() + 1;
                var datum = month + "/" + date.getDate() + "/" + date.getFullYear();
               
                items.ExecutionDate = datum;
                theArray.push(items);  
            }
            var a = JSON.stringify(theArray);
            document.getElementById("<%=CustomerJSON.ClientID %>").value = a; 
        }
    </script>