locked
No Sorting on Few Columns RRS feed

  • Question

  • User-1499457942 posted

    Hi

       I have gridview in Jquery Datatable . I dont want to do sorting on some columns . Secondly Instead of Sorting Icons can we show Underline in Columns

    $(document).ready(function () {
    $('#gvw').dataTable({
    order: [],
    "pageLength": 20
    });
    });

    Thanks

    Sunday, August 26, 2018 9:33 AM

All replies

  • User-893317190 posted

    Hi JagjitSingh,

    You could set the orderable property to false if you don't want to do sorting on some columns.

    If you want to remove the sort icom , you could remove the sort class of the header cells  in jquerydatatable's fnDrawCallback callback. 

    As to underline , you could set HeaderStyle-Font-UnderLine="true" in gridview.

    Below is my code.'

     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
    
     <link href="https://cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />
       
      <script src="https://code.jquery.com/jquery-3.3.1.js"></script>
        <script src="https://cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script>
    </head>
    <body>
        <form id="form1" runat="server">
            <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="EntryNo" DataSourceID="SqlDataSource1">
                <HeaderStyle HorizontalAlign="Center" />
    
                <Columns>
                    <asp:BoundField DataField="EntryNo" HeaderText="EntryNo" InsertVisible="False" ReadOnly="True"  HeaderStyle-Font-UnderLine="true" />
                    <asp:BoundField DataField="Code" HeaderText="Code"  HeaderStyle-Font-UnderLine="true" />
                    <asp:BoundField DataField="Description" HeaderText="Description"  HeaderStyle-Font-UnderLine="true"  />
                    <asp:BoundField DataField="categoryid" HeaderText="categoryid"  />
                </Columns>
            </asp:GridView>
            <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:EntityExe %>" SelectCommand="SELECT [EntryNo], 
    , [Description], [categoryid] FROM [Entries]"></asp:SqlDataSource>
    
             <script>
    
                   $("<thead class='bg-primary text-white'></thead>").append($("#GridView1 tr:first")).prependTo($("#GridView1"));
                 $('#GridView1').dataTable(
                     {
                        order:[],
                               // the target refers to the index of the column,you could choose more than one column like [1,2,3]
                         "columnDefs": [{ "orderable": false, "targets": [3] }],
    
                          
                    "fnDrawCallback": function( oSettings ) { 
                        $("#GridView1 thead  th").removeClass("sorting_asc sorting sorting_desc");
                        
                  }
                        
                     }
    
                 );
    
             </script>

    The  result.

    Best regards,

    Ackerly Xu

    Monday, August 27, 2018 7:10 AM
  • User-1499457942 posted

    Hi Ackerly

       Thanks . It s o.k . Can we change style when mouse is over Header column 

    Thanks

    Monday, August 27, 2018 7:21 AM
  • User-893317190 posted

    Hi JagjitSingh ,

    You could use onmouseover and onmouseout event to help you. Below is my code.

                   $("<thead class='bg-primary text-white'></thead>").append($("#GridView1 tr:first")).prependTo($("#GridView1"));
                 $('#GridView1').dataTable(
                     {
                        order:[],
    
                         "columnDefs": [{ "orderable": false, "targets": [3] }],
    
                          
                    "fnDrawCallback": function( oSettings ) { 
                        $("#GridView1 thead  th").removeClass("sorting_asc sorting sorting_desc");
                        
                    }
                        
                     }
    
                 );
                 $("#GridView1 thead th").not("#GridView1 thead th:eq(3)").mouseover(
    
                     function () {
                     
                         $(this).css("color", "red");
                     }
                 ).mouseout(
                     function() {
                         $(this).css("color", "white");
                     }
                 )
                 
    

    The eq(3) refers to the index of column which you don't want to sort. If you want don't want to sort more than one column ,you could write your code as follows.

     $("#GridView1 thead th").not("#GridView1 thead th:eq(3)").not("#GridView1 thead th:eq(2)").mouseover(
    
                     function () {
                     
                         $(this).css("color", "red");
                     }
                 ).mouseout(
                     function() {
                         $(this).css("color", "white");
                     }
                 )
                 

    The result.

    Best regards,

    Ackerly Xu

    Tuesday, August 28, 2018 2:13 AM
  • User-1499457942 posted

    Hi Ackerly

      Cant we change it to Hand

    Thanks

    Tuesday, August 28, 2018 5:32 AM
  • User-893317190 posted

    Hi JagjitSingh,

    You could try css style cursor.

       $("<thead class='bg-primary text-white'></thead>").append($("#GridView1 tr:first")).prependTo($("#GridView1"));
                 $('#GridView1').dataTable(
                     {
                        order:[],
    
                         "columnDefs": [{ "orderable": false, "targets": [3] }],
    
                          
                    "fnDrawCallback": function( oSettings ) { 
                        $("#GridView1 thead  th").removeClass("sorting_asc sorting sorting_desc");
                        
                    }
                        
                     }
    
                 );
                              $("#GridView1 thead th").not("#GridView1 thead th:eq(3)").css("cursor","pointer")
                 $("#GridView1 thead th").not("#GridView1 thead th:eq(3)").mouseover(
    
                     function () {
                     
                         $(this).css("color", "red");
                     }
                 ).mouseout(
                     function() {
                         $(this).css("color", "white");
                     }
                 )
                 
    
             </script>

    Best regards,

    Ackerly Xu

    Tuesday, August 28, 2018 7:50 AM