http://dotnetbrainee.blogspot.in/<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GridTable.aspx.cs"
Inherits="DT_Pagination.GridTable" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server"> <title></title> <%--<link href="media_ColVis/css/ColVisAlt.css" rel="stylesheet" type="text/css" />--%> <link href="media_ColVis/css/ColVis.css" rel="stylesheet" type="text/css" /> <link href="media/css/TableTools.css" rel="stylesheet" type="text/css" /> <link href="media/css/TableTools_JUI.css" rel="stylesheet" type="text/css" /> <link href="Scripts/css/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css" /> <link href="Scripts/css/themes/smoothness/jquery.ui.theme.css" rel="stylesheet" type="text/css" /> <link href="Scripts/css/jquery.dataTables_themeroller.css" rel="stylesheet" type="text/css" /> <script src="Scripts/js/jquery.js" type="text/javascript"></script> <script src="Scripts/js/jquery.dataTables.min.js" type="text/javascript"></script> <script src="media/js/ZeroClipboard.js" type="text/javascript"></script> <%--<script src="media/js/TableTools.min.js" type="text/javascript"></script>--%> <script src="media/js/TableTools.js" type="text/javascript"></script> <script src="Scripts/js/jquery.dataTables.columnFilter.js" type="text/javascript"></script> <script src="Scripts/js/jquery-ui-1.9.2.custom.min.js" type="text/javascript"></script> <script src="Scripts/js/FixedHeader.js" type="text/javascript"></script> <script src="media_ColVis/js/ColVis.js" type="text/javascript"></script> <style type="text/css"> .ui-datepicker-calendar tr, .ui-datepicker-calendar td, .ui-datepicker-calendar td a, .ui-datepicker-calendar th { font-size: inherit; } div.ui-datepicker { font-size: 10px; } .ui-datepicker-title span { font-size: 10px; } .my-style-class input[type=text] { color: green; } </style> <script type="text/javascript"> var oTable; $(document).ready(function () { $.datepicker.regional[""].dateFormat = 'dd/mm/yy'; $.datepicker.setDefaults($.datepicker.regional['']); TableTools.DEFAULTS.aButtons = [ "copy", "csv", "xls", "pdf", "print", { "sExtends": "collection", "sButtonText": "Save", "aButtons": [ "csv", "xls", //"pdf", { "sExtends": "pdf", //"sPdfOrientation": "landscape", "sPdfMessage": "Your custom message would go here." }, "print" ] }] //TableTools.DEFAULTS.aButtons = [ "copy", "csv", "xls", "pdf" ]; /* Main Functionality */ $('#GridView1').dataTable({ //"oLanguage": { "sSearch": "Search the nominees:" }, "aLengthMenu": [[10, 25, 50, 100, -1], [10, 25, 50, 100, "All"]], "iDisplayLength": 10, "aaSorting": [[0, "asc"]], "bJQueryUI": true, "bAutoWidth": false, "bProcessing": true, "sDom": '<"top"i><"title">lt<"bottom"pf>', "sPaginationType": "full_numbers", "bRetrieve": true, //Scrolling-------------- "sScrollY": "250px", "sScrollX": "100%", "sScrollXInner": "100%", "bScrollCollapse": true, // ---- Print_Export_Copy ---- "sDom": 'T<"clear"><"H"lfr>t<"F"ip>', //"sDom": '<"top"iflp<"clear">>rt<"bottom"iflp<"clear">>', // ----- Column Visiblity ------ //"sDom": '<"H"Cfr>t<"F"ip>', // "oColVis": // { // //"sDom": 'C<"clear">lfrtip', // "activate": "mouseover" // //"bJQueryUI": true // }, //--- Dynamic Language--------- "oLanguage": { "sZeroRecords": "There are no Records that match your search critera", "sLengthMenu": "Display _MENU_ records per page ", "sInfo": "Displaying _START_ to _END_ of _TOTAL_ records", "sInfoEmpty": "Showing 0 to 0 of 0 records", "sInfoFiltered": "(filtered from _MAX_ total records)", "sEmptyTable": 'No Rows to Display.....!', "sSearch": "Search all columns:" }, /* Column Sorting And Searching */ // "aoColumns": [ // { "bSearchable": false }, //Disable search on this column 1 // {"bSortable": false }, //Disable sorting on this column 2 // {"asSorting": ["asc"] }, //Allow only "asc" sorting on column 2 // null, // { "sSortDataType": "dom-text", "sType": "numeric" }, // { "iDataSort": 4 }, //Use column 4 to perform sorting // null, // null // ], /* Column Visibilities */ // "aoColumns": [ // /* Sno */{"bSearchable": false, "bVisible": false}, // /* Engine */ null, // /* Browser */ null, // /* Platform */ { "bSearchable": false, "bVisible": false }, // /* Version */ { "bSearchable": false, "bVisible": false }, // /* Grade */ null, // /* Share */ null, // /* Date */ null // ], "oSearch": { "sSearch": "", "bRegex": false, "bSmart": true }, //------------------------Total in footer "fnFooterCallback": function TotalCalc(nRow, aaData, iStart, iEnd, aiDisplay) { /* Calculate the total market share for all browsers in this table (ie inc. outside the pagination) */ var iTotalMarket = 0; for (var i = 0; i < aaData.length; i++) { //alert('Length : ' + aaData.length + ', Row No : ' + i + ', Share : ' + aaData[i][6]); iTotalMarket += parseInt(aaData[i][6]); } /* Calculate the market share for browsers on this page */ var iPageMarket = 0; for (var i = iStart; i < iEnd; i++) { iPageMarket += parseInt(aaData[aiDisplay[i]][6]); //alert('Length : ' + iStart + ', Row No : ' + i + ', Share : ' + aaData[aiDisplay[i]][6] + 'Total : ' + iPageMarket); } /* Modify the footer row to match what we want */ var nCells = nRow.getElementsByTagName('td'); nCells[0].innerHTML = 'Total : '+parseInt(iPageMarket * 100) / 100 + '% (' + parseInt(iTotalMarket * 100) / 100 + '% Grand Total)'; } // End of Footer Footer }); // ------- Header Buttons ----------- $('<a id="btnDelete" style="padding: 0px; display:none;" class="ui-button ui-widget ui-state-default ui-corner-all' + 'ui-button-text-only" href="javascript:void(0)"><span style="font-size: small; padding: 2px 5px;"' + 'class="ui-button-text"> Delete selected Row</span></a> <button id="refresh">Refresh</button>').appendTo('div.dataTables_length'); //$('<button id="refresh">Refresh</button>').appendTo('div.dataTables_length'); //ReFresh Button $("table#GridView1").dataTable().columnFilter( { //sPlaceHolder: "foot:before", "aoColumns": [ null, //{ "type": "number-range" }, {"type": "text", width: "50px" }, { "type": "select" }, { "type": "text" }, //null, //{ "type": "date-range", width: "50px" }, {"type": "number-range", width: "50px" }, { "type": "select" }, { "type": "select" }, { "type": "date-range"} //{ "type": "date-range", width: "50px" }, ] }); // ------------- Fixed Header ------------- // oTable = $('#GridView1').dataTable(); // new FixedHeader(oTable); //$('#GridView1 div.title').text("This is a table title"); /* Add a click handler to the rows - this could be used as a callback */ $("#GridView1 tbody tr").click(function (e) { if ($(this).hasClass('row_selected')) { $(this).removeClass('row_selected'); $('#btnDelete').hide(); } else { oTable.$('tr.row_selected').removeClass('row_selected'); $(this).addClass('row_selected'); $('#btnDelete').show(); } }); /* Add a click handler for the delete row */ $('#btnDelete').click(function () { var anSelected = fnGetSelected(oTable); if (anSelected.length !== 0) { /* Nedd Ajax Call To perform in serverSide*/ if (confirm('Are you sure you wish to delete this row?')) { /* do the delete */ oTable.fnDeleteRow(anSelected[0]); } else { $("#GridView1 tbody tr").removeClass('row_selected'); $('#btnDelete').hide(); } } }); $.fn.dataTableExt.oStdClasses["filterColumn"] = "my-style-class"; $('#GridView1 tbody td').click(function () { /* Get the position of the current data from the node */ var aPos = oTable.fnGetPosition(this); var aData = oTable.fnGetData(aPos[0]); //alert(aData[0]); }); /* Init the table */ oTable = $('#GridView1').dataTable(); }); function fnGetSelected(oTableLocal) { return oTableLocal.$('tr.row_selected'); } //$("div.tools").html('Organize by: <select id="booking_status"><option value="">All Bookings</option><option value="confirmed">Upcoming</option><option value="arrived">Arrived</option><option value="rejected">Rejected</option></select>'); </script> </head> <body> <form id="form1" runat="server"> <div class="Shadow"> <asp:GridView ID="GridView1" runat="server" OnPreRender="GridView1_PreRender"
ShowFooter="true" AutoGenerateColumns="false"> <Columns> <asp:TemplateField HeaderText="S.No"> <ItemTemplate> <%# Eval("id") %> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Engine"> <ItemTemplate> <%# Eval("engine")%> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Browser"> <ItemTemplate> <%# Eval("browser")%> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Platform"> <ItemTemplate> <%# Eval("platform")%> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Version"> <ItemTemplate> <%# Eval("version")%> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Grade"> <ItemTemplate> <%# Eval("grade")%> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Market Share"> <ItemTemplate> <%# Eval("marketshare")%> </ItemTemplate> </asp:TemplateField> <asp:TemplateField HeaderText="Date"> <ItemTemplate> <%# Eval("RDate")%> </ItemTemplate> </asp:TemplateField> </Columns> </asp:GridView> </div> </form> </body> </html>
Code Behind :
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Data; using System.Data.SqlClient; namespace DT_Pagination { public partial class GridTable : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { string strConnect = "server=.\\MYDATABASE; user id=sa; pwd=*****; database=aspdotnetDB;"; DataSet dataset = new DataSet(); SqlDataAdapter da = new SqlDataAdapter("select *,convert(varchar(10),released,103) as RDate from ajax", strConnect); da.Fill(dataset, "ajax"); GridView1.DataSource = dataset; GridView1.DataBind(); } protected void GridView1_PreRender(object sender, EventArgs e) { GridView1.UseAccessibleHeader = false; GridView1.HeaderRow.TableSection = TableRowSection.TableHeader; GridView1.FooterRow.TableSection = TableRowSection.TableFooter; int CellCount = GridView1.FooterRow.Cells.Count; GridView1.FooterRow.Cells.Clear(); GridView1.FooterRow.Cells.Add(new TableCell()); GridView1.FooterRow.Cells[0].ColumnSpan = CellCount - 1; GridView1.FooterRow.Cells[0].HorizontalAlign = HorizontalAlign.Right; GridView1.FooterRow.Cells.Add(new TableCell()); TableFooterRow tfr = new TableFooterRow(); for (int i = 0; i < CellCount; i++) { tfr.Cells.Add(new TableCell()); //tfr.Cells[i].i //tfr.Cells[i].ColumnSpan = CellCount; //tfr.Cells[0].Text = "Footer 2"; } GridView1.FooterRow.Controls[1].Controls.Add(tfr); } } }
No comments:
Post a Comment