locked
DataTable.js and Gridview in Content Page RRS feed

  • Question

  • User-122398568 posted

    Hi All,

    I have a master page which contains all the declarations of .css and .js. The source code is as follow:

    <%@ Master Language="C#" AutoEventWireup="true" CodeBehind="Admin.master.cs" Inherits="DistributorManagementSystem.Admin.Admin" %>
    
    <!DOCTYPE html>
    
    <html>
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <title>Distributor Management System | Admin</title>
        <!-- Tell the browser to be responsive to screen width -->
        <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport" />
        <!-- Bootstrap 3.3.6 -->
        <link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css" />
        <!-- Font Awesome -->
        <link rel="stylesheet" href="../bootstrap/css/font-awesome.min.css" />
        <!-- Ionicons -->
        <link rel="stylesheet" href="../bootstrap/css/ionicons.min.css" />
        <!-- DataTables -->
        <link rel="stylesheet" href="../plugins/datatables/dataTables.bootstrap.css">
        <!-- Theme style -->
        <link rel="stylesheet" href="../dist/css/AdminLTE.min.css" />
        <!-- AdminLTE Skins. Choose a skin from the css/skins folder instead of downloading all of them to reduce the load. -->
        <link rel="stylesheet" href="../dist/css/skins/_all-skins.min.css" />
        <!-- iCheck -->
        <link rel="stylesheet" href="../plugins/iCheck/flat/blue.css" />
        <!-- Morris chart -->
        <link rel="stylesheet" href="../plugins/morris/morris.css" />
        <!-- jvectormap -->
        <link rel="stylesheet" href="../plugins/jvectormap/jquery-jvectormap-1.2.2.css" />
        <!-- Date Picker -->
        <link rel="stylesheet" href="../plugins/datepicker/datepicker3.css" />
        <!-- Daterange picker -->
        <link rel="stylesheet" href="../plugins/daterangepicker/daterangepicker.css" />
        <!-- bootstrap wysihtml5 - text editor -->
        <link rel="stylesheet" href="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css" />
    
        <link rel="shortcut icon" href="../dist/img/bee.ico" />
    
        <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->
    </head>
    <body class="hold-transition skin-yellow sidebar-mini">
        <form id="form1" runat="server">
            <div class="wrapper">
                <header class="main-header">
                    <!-- Logo -->
                    <div class="logo">
                        <!-- mini logo for sidebar mini 50x50 pixels -->
                        <span class="logo-mini">
                            <asp:Image ImageUrl="../dist/img/_Admin.png" runat="server" />
                        </span>
                        <!-- logo for regular state and mobile devices -->
                        <span class="logo-lg">
                            <asp:Image ImageUrl="../dist/img/_Admin.png" runat="server" />&nbsp;&nbsp<b>Administrator</b>
                        </span>
                    </div>
                    <!-- Header Navbar: style can be found in header.less -->
                    <nav class="navbar navbar-static-top">
                        <!-- Sidebar toggle button-->
                        <a href="#" class="sidebar-toggle" data-toggle="offcanvas" role="button">
                            <span class="sr-only">Toggle navigation</span>
                        </a>
                        <div class="navbar-custom-menu">
                            <ul class="nav navbar-nav">
                                <!-- User Account: style can be found in dropdown.less -->
                                <li class="dropdown user user-menu">
                                    <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                                        <asp:Image ID="imgLarger" CssClass="user-image" runat="server" />
                                        <span class="hidden-xs">
                                            <asp:Label ID="lblFullNameTop" runat="server" />
                                        </span>
                                    </a>
                                    <ul class="dropdown-menu">
                                        <!-- User image -->
                                        <li class="user-header">
                                            <asp:Image ID="imgSmaller" CssClass="img-circle" runat="server" />
                                            <p>
                                                <u>
                                                    <asp:Label ID="lblFullNameBottom" runat="server" /></u>
                                                <small>Tanggal Registrasi:
                                                    <asp:Label ID="lblRegistrationDate" runat="server" /></small>
                                            </p>
                                        </li>
                                        <!-- Menu Body -->
                                        <!-- Menu Footer-->
                                        <li class="user-footer">
                                            <div class="pull-left">
                                                <asp:Button ID="btnChangePassword" Text="Ganti Kata Sandi" CssClass="btn btn-default btn-flat" OnClick="btnChangePassword_Click" runat="server" />
                                            </div>
                                            <div class="pull-right">
                                                <asp:Button ID="btnLogout" Text="Keluar" CssClass="btn btn-default btn-flat" OnClick="btnLogout_Click" runat="server" />
                                            </div>
                                        </li>
                                    </ul>
                                </li>
                            </ul>
                        </div>
                    </nav>
                </header>
                <!-- Left side column. contains the logo and sidebar -->
                <aside class="main-sidebar">
                    <!-- sidebar: style can be found in sidebar.less -->
                    <section class="sidebar">
                        <!-- Sidebar user panel -->
                        <!-- sidebar menu: : style can be found in sidebar.less -->
                        <ul class="sidebar-menu">
                            <li class="header">NAVIGASI</li>
                            <li>
                                <a href="Dashboard.aspx">
                                    <i class="fa fa-dashboard"></i>
                                    <span>Dashboard</span>
                                </a>
                            </li>
                            <li class="treeview">
                                <a href="#">
                                    <i class="fa fa-users"></i>
                                    <span>Pengguna</span>
                                    <span class="pull-right-container">
                                        <i class="fa fa-angle-left pull-right"></i>
                                    </span>
                                </a>
                                <ul class="treeview-menu">
                                    <li><a href="AddUser.aspx"><i class="fa fa-circle-o"></i>Registrasi Pengguna</a></li>
                                    <li><a href="ViewUser.aspx"><i class="fa fa-circle-o"></i>Daftar Pengguna</a></li>
                                </ul>
                            </li>
                        </ul>
                    </section>
                    <!-- /.sidebar -->
                </aside>
    
                <!-- Content Wrapper. Contains page content -->
                <div class="content-wrapper">
                    <asp:ContentPlaceHolder ID="ContentPlaceHolderAdmin" runat="server" />
                </div>
    
                <!-- /.content-wrapper -->
                <footer class="main-footer">
                    <asp:Label ID="lblCompany" Font-Bold="true" runat="server" />
                </footer>
            </div>
            <!-- ./wrapper -->
    
            <!-- jQuery 2.2.3 -->
            <script src="../plugins/jQuery/jquery-2.2.3.min.js"></script>
            <!-- jQuery UI 1.11.4 -->
            <script src="../plugins/jQueryUI/jquery-ui.min.js"></script>
            <!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
            <script>
                $.widget.bridge('uibutton', $.ui.button);
            </script>
            <!-- Bootstrap 3.3.6 -->
            <script src="../bootstrap/js/bootstrap.min.js"></script>
            <!-- DataTables -->
            <script src="../plugins/datatables/jquery.dataTables.min.js"></script>
            <script src="../plugins/datatables/dataTables.bootstrap.min.js"></script>
            <!-- Morris.js charts -->
            <script src="../plugins/raphael/raphael-min.js"></script>
            <script src="../plugins/morris/morris.min.js"></script>
            <!-- Sparkline -->
            <script src="../plugins/sparkline/jquery.sparkline.min.js"></script>
            <!-- jvectormap -->
            <script src="../plugins/jvectormap/jquery-jvectormap-1.2.2.min.js"></script>
            <script src="../plugins/jvectormap/jquery-jvectormap-world-mill-en.js"></script>
            <!-- jQuery Knob Chart -->
            <script src="../plugins/knob/jquery.knob.js"></script>
            <!-- daterangepicker -->
            <script src="../plugins/moment/moment.min.js"></script>
            <script src="../plugins/daterangepicker/daterangepicker.js"></script>
            <!-- datepicker -->
            <script src="../plugins/datepicker/bootstrap-datepicker.js"></script>
            <!-- Bootstrap WYSIHTML5 -->
            <script src="../plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js"></script>
            <!-- Slimscroll -->
            <script src="../plugins/slimScroll/jquery.slimscroll.min.js"></script>
            <!-- FastClick -->
            <script src="../plugins/fastclick/fastclick.js"></script>
            <!-- AdminLTE App -->
            <script src="../dist/js/app.min.js"></script>
            <!-- AdminLTE dashboard demo (This is only for demo purposes) -->
            <script src="../dist/js/pages/dashboard.js"></script>
            <!-- AdminLTE for demo purposes -->
            <script src="../dist/js/demo.js"></script>
        </form>
    </body>
    </html>
    

    Meanwhile, the content page is following:

    <%@ Page MasterPageFile="~/Admin/Admin.Master" MaintainScrollPositionOnPostback="true" Language="C#" AutoEventWireup="true" CodeBehind="ViewUser.aspx.cs" Inherits="DistributorManagementSystem.Admin.ViewUser" %>
    
    <asp:Content ID="ViewUserContent" ContentPlaceHolderID="ContentPlaceHolderAdmin" runat="Server">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>Daftar Pengguna</h1>
        </section>
    
        <!-- Main content -->
        <section class="content">
            <div class="row">
                <!-- left column -->
                <div class="box box-warning">
                    <div class="box-header with-border">
                        <div class="form-horizontal">
                            <div class="box-body">
                                <div class="form-group">
                                    <div class="col-md-2 control-label">Nama Pengguna</div>
                                    <div class="col-md-4">
                                        <asp:TextBox ID="txtUsername" CssClass="form-control" runat="server" />
                                    </div>
                                    <div class="col-md-4 control-label"></div>
                                </div>
                                <div class="form-group">
                                    <div class="col-md-2 control-label"></div>
                                    <div class="col-md-4">
                                        <asp:Button ID="btnSearch" Text="Cari" CssClass="btn btn-primary" OnClick="btnSearch_Click" runat="server" />
                                    </div>
                                    <div class="col-md-4 control-label"></div>
                                </div>
                                <div class="form-group">
                                    <div class="col-md-12">
                                        <asp:GridView ID="GridViewUser"
                                            AutoGenerateColumns="false"
                                            AllowPaging="true"
                                            CssClass="table table-bordered table-striped"
                                            ClientIDMode="Static"
                                            runat="server">
                                            <Columns>
                                                <asp:TemplateField ItemStyle-HorizontalAlign="Center">
                                                    <ItemTemplate>
                                                        <asp:CheckBox ID="chkBoxEdit" runat="server" />
                                                    </ItemTemplate>
                                                </asp:TemplateField>
                                                <asp:ImageField DataImageUrlField="image_url" HeaderText="Foto" ItemStyle-HorizontalAlign="Center" />
                                                <asp:BoundField DataField="username" HeaderText="Nama Pengguna" />
                                                <asp:BoundField DataField="password" HeaderText="Kata Sandi" />
                                                <asp:BoundField DataField="role" HeaderText="Tipe Pengguna" />
                                                <asp:BoundField DataField="first_name" HeaderText="Nama Depan" />
                                                <asp:BoundField DataField="last_name" HeaderText="Nama Belakang" />
                                                <asp:BoundField DataField="status" HeaderText="Status" />
                                            </Columns>
                                        </asp:GridView>
                                    </div>
                                </div>
                                <div class="form-group">
                                    <div class="col-md-12">
                                        <asp:Label ID="lblMessage" ForeColor="Green" Font-Bold="true" runat="server"></asp:Label>
                                        <asp:Label ID="lblErrorMessage" ForeColor="Red" Font-Bold="true" runat="server"></asp:Label>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- /.row -->
        </section>
        <!-- /.content -->
    
        <script>
            $(document).ready(function () {
                $('#GridViewUser').DataTable({
                    "paging": true,
                    "lengthChange": false,
                    "searching": false,
                    "ordering": true,
                    "info": true,
                    "autoWidth": false
                });
            });
        </script>
    </asp:Content>

    Code behind:

    using BeeTeamEncryption;
    using log4net;
    using log4net.Config;
    using MySql.Data.MySqlClient;
    using System;
    using System.Collections.Generic;
    using System.Configuration;
    using System.Data;
    using System.Linq;
    using System.Security.Cryptography;
    using System.Text;
    using System.Web;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    
    namespace DistributorManagementSystem.Admin
    {
        public partial class ViewUser : System.Web.UI.Page
        {
            ILog logger = log4net.LogManager.GetLogger(typeof(ViewUser));
    
            string user;
            string role;
    
            protected void Page_Load(object sender, EventArgs e)
            {
                user = (string)(Session["User"]);
                role = (string)(Session["Role"]);
    
                if (!IsPostBack)
                {
                    /*lblUpdateUsername.Visible = false;
                    txtUpdateUsername.Visible = false;
                    lblUpdatePassword.Visible = false;
                    txtUpdatePassword.Visible = false;
                    lblUpdateRole.Visible = false;
                    ddlUpdateRole.Visible = false;
                    lblUpdateFirstName.Visible = false;
                    txtUpdateFirstName.Visible = false;
                    lblUpdateLastName.Visible = false;
                    txtUpdateLastName.Visible = false;
                    lblUpdateStatus.Visible = false;
                    ddlUpdateStatus.Visible = false;
    
                    btnUpdate.Visible = false;
                    btnSubmit.Visible = false;*/
                }
    
                lblMessage.Text = "";
                lblErrorMessage.Text = "";
            }
    
            protected void bindData()
            {
                MySqlConnection conn = new MySqlConnection(BeeTeamEncryptionTool.Decrypt(ConfigurationManager.ConnectionStrings["DMSDBConnString"].ConnectionString.ToString(), true));
    
                try
                {
                    conn.Open();
    
                    string strCheckUser;
                    MySqlCommand cmdCheckUser;
    
                    if (txtUsername.Text == "")
                    {
                        strCheckUser = "select count(*) from tbluser";
                        cmdCheckUser = new MySqlCommand(strCheckUser, conn);
                    }
                    else
                    {
                        strCheckUser = "select count(*) from tbluser where username like @param_username";
                        cmdCheckUser = new MySqlCommand(strCheckUser, conn);
                        cmdCheckUser.Parameters.AddWithValue("@param_username", "%" + txtUsername.Text + "%");
                    }
    
                    DataSet dataSet = new DataSet();
                    string strGetUser;
                    MySqlCommand cmdGetUser;
    
                    if (Convert.ToInt32(cmdCheckUser.ExecuteScalar()) >= 1)
                    {
                        if (txtUsername.Text == "")
                        {
                            strGetUser = "select a.username, a.password, b.role, a.first_name, a.last_name, a.image_url, a.status from (select username, password, role_id, first_name, last_name, image_url, status from tbluser) as a left join (select id, role from tblrole) as b on a.role_id=b.id order by a.username";
                            cmdGetUser = new MySqlCommand(strGetUser, conn);
                        }
                        else
                        {
                            strGetUser = "select a.username, a.password, b.role, a.first_name, a.last_name, a.image_url, a.status from (select username, password, role_id, first_name, last_name, image_url, status from tbluser) as a left join (select id, role from tblrole) as b on a.role_id=b.id where a.username like @param_username order by a.username";
                            cmdGetUser = new MySqlCommand(strGetUser, conn);
                            cmdGetUser.Parameters.AddWithValue("@param_username", "%" + txtUsername.Text + "%");
                        }
    
                        MySqlDataAdapter dataAdapter = new MySqlDataAdapter(cmdGetUser);
                        dataAdapter.Fill(dataSet);
                        GridViewUser.DataSource = dataSet;
                        GridViewUser.DataBind();
                        GridViewUser.UseAccessibleHeader = true;
                        GridViewUser.HeaderRow.TableSection = TableRowSection.TableHeader;
    
                        //bindRole();
    
                        //btnUpdate.Visible = true;
                    }
                    else
                    {
                        GridViewUser.DataSource = null;
                        GridViewUser.DataBind();
    
                        //btnUpdate.Visible = false;
    
                        lblErrorMessage.Text = "* Data tidak ditemukan.";
                    }
                }
                catch (Exception exc)
                {
                    logger.Error(exc.ToString());
                    lblErrorMessage.Text = "* Kesalahan dalam pengambilan data pengguna dari sistem. Harap melaporkan masalah ini kepada pihak Bee Team IT Solutions.";
                }
                finally
                {
                    conn.Close();
                }
            }
    
            protected void btnSearch_Click(object sender, EventArgs e)
            {
                GridViewUser.PageIndex = 0;
                bindData();
            }
    
            protected void GridViewUser_PageIndexChanging(object sender, GridViewPageEventArgs e)
            {
                GridViewUser.PageIndex = e.NewPageIndex;
                bindData();
            }
        }
    }

    However, the display of the pagination is not working as desired.

    Any suggestion??

    Thanks

    Kuswanto

    Friday, December 23, 2016 3:39 AM

All replies

  • User-271186128 posted

    Hi Kuswanto,

    Welcome to asp.net forum.

    However, the display of the pagination is not working as desired.

    According to your code, it seems that you are using two methods (using GridView PageIndexChanging event and DataTable.js plugin) together to implement pagination.

    As far as I know, when we using GridView PageIndexChanging event. the default page size is 10. If you want to use DataTable.js plugin, you should display all of the records into the Table, then implement pagination.

    So, I suggest you could try to use one of these methods to implement the pagination.

    More details about using GridView paging, see:

    http://www.aspsnippets.com/Articles/Paging-in-ASPNet-GridView-Example.aspx

    More details about using DataTable.js plugin, please refer to this link:

    https://datatables.net/examples/basic_init/zero_configuration.html

    Besides, if you are using DataTable.js, please move the js reference into the header or before the ContentPlaceHolderAdmin.

    Best regards,
    Dillion

    Monday, December 26, 2016 7:50 AM