Post
Ask Question
taha suliman

taha suliman

  • 1.4k
  • 368
  • 6.7k

Get Selected row for Bootsrap Datatable in GridView not work

Feb 6 2020 4:08 AM
  1. <html xmlns="http://www.w3.org/1999/xhtml">  
  2. <head runat="server">  
  3.     <title></title>  
  4.   
  5.     <link href="files/jquery.dataTables.min.css" rel="stylesheet" />  
  6.     <link href="files/select.dataTables.min.css" rel="stylesheet" />  
  7.   
  8. </head>  
  9. <body>  
  10.     <form id="form1" runat="server">  
  11.   
  12.     <div style="padding:50px;">  
  13. <button id="btnSelectedRows" type="button">Get Selected Rows</button>  
  14.         <hr />  
  15.   
  16.         <asp:GridView ID="GridView1" OnPreRender="GridView_PreRender" ShowFooter="true"  
  17.         AutoGenerateColumns="False" CssClass="table table-striped table-bordered" runat="server">  
  18.         <Columns>  
  19.         <asp:BoundField DataField="" HeaderText="" />  
  20.    
  21.         <asp:BoundField DataField="Id" HeaderText="Id" />  
  22.         <asp:BoundField DataField="Name" HeaderText="Name" />  
  23.         <asp:BoundField DataField="Position" HeaderText="Position"/>  
  24.         <asp:BoundField DataField="Office" HeaderText="Office" />  
  25.         <asp:BoundField DataField="Extn" HeaderText="Extn"/>  
  26.         <asp:BoundField DataField="Start date"  DataFormatString="{0:dd-MM-yyyy}" HeaderText="Start date"/>  
  27.         <asp:BoundField DataField="Salary" HeaderText="Salary"/>  
  28.   
  29.         </Columns>  
  30.   
  31.         </asp:GridView>  
  32.     </div>  
  33.     </form>  
  34.     <script src="files/jquery-1.12.4.js"></script>  
  35.     <script src="files/jquery.dataTables.min.js"></script>  
  36.     <script src="files/dataTables.select.min.js"></script>  
  37.     <script>  
  38.   
  39.         $(document).ready(function () {  
  40.             table = $('#<%= GridView1.ClientID %>').dataTable({  
  41.                         columnDefs: [{  
  42.                             orderable: false,  
  43.                             className: 'select-checkbox',  
  44.                             targets: 0  
  45.   
  46.                         }, {  
  47.                                 "targets": [2],  
  48.                                 "visible": false,  
  49.                                 "searchable": false  
  50.                             }],  
  51.                         select: {  
  52.                             style: 'os',  
  53.                             selector: 'td:first-child'  
  54.                         },  
  55.   
  56.                         "aLengthMenu": [[10, 50, 75, -1], [10, 50, 75, "All"]],  
  57.                         "iDisplayLength": 10,  
  58.                         "order": [[2, "asc"]],  
  59.                         stateSave: true,  
  60.                         stateSaveCallback: function (settings, data) {  
  61.                             localStorage.setItem('DataTables_' + settings.sInstance, JSON.stringify(data));  
  62.                         },  
  63.                         stateLoadCallback: function (settings) {  
  64.                             return JSON.parse(localStorage.getItem('DataTables_' + settings.sInstance));  
  65.                         }  
  66.   
  67.   
  68.             });  
  69.         });  
  70.   
  71.   
  72.         $('#btnSelectedRows').on('click', function () {  
  73.             var tblData = table.rows('.selected').data();  
  74.             var tmpData;  
  75.             $.each(tblData, function (i, val) {  
  76.                 tmpData = tblData[i];  
  77.                 alert(tmpData);  
  78.             });  
  79.         });  
  80.   
  81.     </script>  
  82. </body>  
  83. </html> 
  84. ---------------------------------------
    1. using System;  
    2. using System.Collections.Generic;  
    3. using System.Configuration;  
    4. using System.Data;  
    5. using System.Data.SqlClient;  
    6. using System.Linq;  
    7. using System.Web;  
    8. using System.Web.UI;  
    9. using System.Web.UI.WebControls;  
    10.   
    11. public partial class Default2 : System.Web.UI.Page  
    12. {  
    13.         protected void Page_Load(object sender, EventArgs e)  
    14.         {  
    15.   
    16.             if (!IsPostBack)  
    17.             {  
    18.                 getdata();  
    19.             }  
    20.         }  
    21.         private void getdata()  
    22.         {  
    23.             string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;  
    24.             SqlConnection con = new SqlConnection(constr);  
    25.             var commandStr = "select * from EmployeeData ";  
    26.   
    27.             using (SqlCommand command = new SqlCommand(commandStr, con))  
    28.             {  
    29.                 using (SqlDataAdapter sda = new SqlDataAdapter(command))  
    30.                 {  
    31.                     DataTable dt = new DataTable();  
    32.                     sda.Fill(dt);  
    33.                     GridView1.DataSource = dt;  
    34.                     GridView1.DataBind();  
    35.                 }  
    36.             }  
    37.   
    38.         }  
    39.     protected void GridView_PreRender(object sender, EventArgs e)  
    40.     {  
    41.         GridView gv = (GridView)sender;  
    42.   
    43.         if ((gv.ShowHeader == true && gv.Rows.Count > 0)  
    44.             || (gv.ShowHeaderWhenEmpty == true))  
    45.         {  
    46.             //Force GridView to use <thead> instead of <tbody> - 11/03/2013 - MCR.  
    47.             gv.HeaderRow.TableSection = TableRowSection.TableHeader;  
    48.         }  
    49.         if (gv.ShowFooter == true && gv.Rows.Count > 0)  
    50.         {  
    51.             //Force GridView to use <tfoot> instead of <tbody> - 11/03/2013 - MCR.  
    52.             gv.FooterRow.TableSection = TableRowSection.TableFooter;  
    53.         }  
    54.     }  
    55.     //----------------  
    56. } 
    releated to the Bootstrap DataTable in the bellow link

    https://jsfiddle.net/mmushtaq/q67L1a9a/

Answers (1)