Quantcast
Channel: Recent Discussions — DataTables forums
Viewing all articles
Browse latest Browse all 82152

After getting data table rows through sAjaxSource i am unable to hide column using aoColumnDefs

$
0
0
 <table class="display admintable" id="tblSubcategories"><thead><tr><th class="invisible"> Id </th> <th> Subcategoryname </th>
<th>NotCombiningAllowed </th>  <th class="actionlinks">Options</th>    </tr> </thead>    <tbody> 
                                 foreach (var item in Model)
                                 {
                                <tr><td style="display:none;">SubcategoryId</td>   <td> @item.Subcategoryname </td><td>NotCombiningAllowed</td>
                                        <td> <a href='' class='edit' rel='tootip' title='edit category'><img src='/Content/Images/editicon.gif' alt='Edit' /></a>&nbsp;&nbsp;<a href='' class='delete'  rel='tootip' title='Delete category' ><img src='/Content/Images/deleteicon.gif' alt='delete' /></a>
                                        </td> </tr>  }</tbody> </table>
 <script type="text/javascript">

        var oTable;
        $(document).ready(function () {           

            oTable = $('#tblSubcategories').dataTable();
            var nEditing = null;

            $('#tblSubcategories a.edit').live('click', function (e) {
                e.preventDefault();

                /* Get the row as a parent of the link that was clicked on */
                var nRow = $(this).parents('tr')[0];
                
                if (nEditing !== null && nEditing != nRow) {
                    /* A different row is being edited - the edit should be cancelled and this row edited */
                    restoreRow(oTable, nEditing);
                    editRow(oTable, nRow);
                    nEditing = nRow;

                }
                else if (nEditing == nRow && this.innerHTML == "Save") {
                    /* This row is being edited and should be saved */
                    saveRow(oTable, nEditing);
                    nEditing = null;
                }
                else {
                    /* No row currently being edited */
                    editRow(oTable, nRow);
                    nEditing = nRow;
                }
            });


            $('#tblSubcategories a.delete').live('click', function (e) {
                e.preventDefault();
                
                var nRow = $(this).parents('tr')[0];
                deleteRow(oTable, nRow);

            });

            $('#new').click(function (e) {
                e.preventDefault();

                var aiNew = oTable.fnAddData(['0', '','', '<a class="edit" href="">Edit</a>']);
                var nRow = oTable.fnGetNodes(aiNew[0]);
                editRow(oTable, nRow);
                nEditing = nRow;
            });
        });
        function deleteRow(oTable,nRow){
            var aData = oTable.fnGetData(nRow);
             if ( confirm( "Are you sure you want to delete "+aData[1]+"?" ) )
             {
            $.ajax({
                url: 'DeletesubcategoryRow',
                type: 'GET',
                cache: false,
                data: { Input: aData[0]
                },
                success: function (data) {
                    if (data == "True")
                        oTable.fnDeleteRow(nRow);
                    else
                        alert("Error occurs while deleting on DB");
                },
                error: function (xmlhtt) {
                    alert("error occurs in ajax call");
                    //do error handling
                }
            });
            }

        }

        function editRow(oTable, nRow) {
            var aData = oTable.fnGetData(nRow);
            var jqTds = $('>td', nRow);
            var categoryvalue = $('#categoryId').val();
            
         
                //getting dropdown
                $.ajax({
                    url: 'Getnotcombiningcategories',
                    type: 'GET',
                    cache: false,
                    data: { Input: aData[0], category: categoryvalue, selectedvalues: aData[5]
                    },
                    success: function (data) {
                        var obj = $.parseJSON(data);

                        $.each(obj, function () {
                            $("#dropdown option[value='" + this['Value'] + "']").remove();
                            $('#dropdown').append('<option value="' + this['Value'] + '" selected="' + this['Selected'] + '">' + this['Text'] + '</option>');
                        });                       

                    },
                    error: function (xmlhtt) {
                        alert("error in getting Id count");
                        //do error handling
                    }
                });

                //End of getting dropdown

               
                var strempty = '<input type="hidden" value="0">';

              
                jqTds[0].innerHTML = '<input type="text" value="' + aData[1] + '">';               
                jqTds[1].innerHTML = '<select id="dropdown" name="dropdown" multiple="multiple" ></select>';
                jqTds[2].innerHTML = '<a class="edit" href="" style="color:Black;"  rel="tootip" title="save category">Save</a>&nbsp;&nbsp;<a href="" class="delete"  rel="tootip" title="Delete category"><img src="/Content/Images/deleteicon.gif" alt="delete" /></a>';
       
        }

        function saveRow(oTable, nRow) {
          var aData = oTable.fnGetData(nRow);
            var jqInputs = $('input', nRow);
            var selectedinput = $('select', nRow);

            var selecteddisplay = [];
            selectedinput.each(function (i, selected) {
                selecteddisplay[i] = $(selected).val();
            });

            var categoryvalue =  $('#categoryId').val();    
           
           //saving to DB
            $.ajax({
                url: 'EditSubcategory',
                type: 'POST',
                cache: false,
                data: { Inputstring: aData[0] + '^' + jqInputs[0].value + '^' + selecteddisplay + '^' + categoryvalue
                },
                success: function (data) {

                    oTable.fnUpdate(jqInputs[0].value, nRow, 0, false);                                     
                    oTable.fnUpdate("" + selecteddisplay + "<input type='hidden' name='selectedvalues' value='"+selecteddisplay+"'/>", nRow, 4, false);
                    oTable.fnUpdate('<a class="edit" href=""> <img src="@Url.Content("~/Content/Images/editicon.gif")" alt="Edit" /></a><a href="" class="delete">&nbsp;&nbsp;<img src="/Content/Images/deleteicon.gif" alt="delete" /></a>', nRow, 5, false);

                  

                },
                error: function (xmlhtt) {
                    alert("error in saving");
                    //do error handling
                }
            });

             reloadtable(categoryvalue);           

        }

        function restoreRow(oTable, nRow) {
            var aData = oTable.fnGetData(nRow);
            var jqTds = $('>td', nRow);

            for (var i = 0, iLen = jqTds.length; i < iLen; i++) {
                oTable.fnUpdate(aData[i], nRow, i, false);
            }

            oTable.fnDraw();
        }
        function reloadtable(id) {      
            oTable.fnDestroy();
            $('#tblSubcategories').dataTable({
            "sAjaxSource": '/wpadmin/Getsubgroups?category=' + id,
            
            "aoColumnDefs": [{ "bSortable": false, "aTargets": ["actionlinks"] },{ "bVisible": false, "aTargets": [ "visible" ] }
            ]
                
            });
        }


       
    </script>

Above is html and javascript code. In the page itself i am implementing inline edit with dropdown ,after edit in dropdown instead of value i need to display Text so i am calling ajax method to get text but now table rows are disorder due to hidden table header is there ,i want that column as hidden ,can any one help to solve this or link any code example of this type of application to learn.

Viewing all articles
Browse latest Browse all 82152

Trending Articles