Merhaba ;

Şuan uğraştığım proje için bulduğum tablo eklentilerinin senkron olmasından kaynaklanan , asenkron eklenti arayışımın sonucu olarak ortaya çıkan tablo eklentimi sizlerle paylaşacağım.

Proje Linki : https://github.com/UurDemir/ajaxTableCreater

Eklenti görsel bir şey sunmuyor size sadece işlevsellik sunuyor. Bütün işlemler Ajax üzerinden asenkron olarak işlev görüyor. Yaptığı işlemler en altta liste halinde bulunmaktadır. Tavsiyelerinizi bulduğunuz hataları yorum olarak yada uurdemir@outlook.com adresine mail atarak bana bildirebilirsiniz.

Eklentinin kullanımı :

<link href="css/ajaxTableCreater.css" rel="stylesheet" />


    <script src="js/jquery-1.7.2.min.js"></script>


    <script src="js/ajaxTableCreater-lang.js"></script>
    <script src="js/ajaxTableCreater.js"></script>


    <script type="text/javascript">
        var table;
        $(document).ready(function () {


            table = $("table");
            table.CreateDataTable(
                {
                    GetMetot: "Default.aspx/GetVisitorMessages",
                    PrimaryColumn: "ID",
                    PrimaryColumnShow : true,
                    actionColumn: "<a class=\"btn btn-success\" href=\"javascript:ReadMessage('_[ID]_');\"><i class=\"icon-zoom-in icon-white\"></i>View</a><a class=\"btn btn-danger\" href=\"javascript:DeleteMessage('_[ID]_');\"><i class=\"icon-trash icon-white\"></i> Sil</a>",
                    whereText: "MessageContent like '%_[Search]_%'"
                }
            );


        });
</script>

Parametrelerin Anlamları :


GetMetot = Eklentinin kullanacağı metodun yolu

PrimaryColumn = PrimaryKey e sahip olan sütunun adı

PrimaryColumnShow = PrimaryKey e sahip olan sütunun gösterilip gösterilmeyeceğini belirler

actionColumn = İşlemler isimli sütuna kullanıcının eklemek istediği elementlerin yazıldığı yer (_[ID]_ yazılan yere o verinin PrimaryKey inin değeri eklenir)

whereText = Arama kutusunda arama yapılırken kullanılacak sorgu (_[Search]_ yazılan yere arama kutusundaki değer eklenir)


Örnek Web Method =

 [WebMethod]
        public static object GetVisitorMessages(int pageIndex = 1, int pageSize = 10, string whereStr = null, string orderStr = null)
        {
            var visitorMessages = new List<object>();
            long resultTotal = 0;


            using (var connection = new SqlConnection(ConnectionString))
            {
                connection.Open();


                using (var command = new SqlCommand(String.Format("Select Top {0} * From VisitorMessages WHERE VisitorMessageID NOT IN (Select Top {1} VisitorMessageID FROM VisitorMessages @orderby)", pageSize, (pageIndex - 1) * pageSize), connection))
                {
                    if (!String.IsNullOrWhiteSpace(whereStr))
                        command.CommandText += " and " + whereStr;


                    if (!String.IsNullOrWhiteSpace(orderStr))
                    {
                        orderStr = orderStr.Replace("Başlık", "MessageTitle")
                                           .Replace("ID", "VisitorMessageID")
                                           .Replace("Email", "MessageEmail")
                                           .Replace("Durum", "MessageIsReaded")
                                           .Replace("Tarih", "MessageCreateDate");
                        orderStr = " Order By " + orderStr;
                        command.CommandText += orderStr;
                    }
                    command.CommandText = command.CommandText.Replace("@orderby", orderStr);
                    using (var reader = command.ExecuteReader())
                    {
                        if (reader.HasRows)
                        {
                            while (reader.Read())
                            {
                                visitorMessages.Add(
                                    new
                                    {
                                        ID = Guid.Parse(reader["VisitorMessageID"].ToString()),
                                        Başlık = reader["MessageTitle"].ToString(),
                                        Email = reader["MessageEmail"].ToString(),
                                        Durum = (bool.Parse(reader["MessageIsReaded"].ToString()) ? "Okundu" : "Okunmadı"),
                                        Tarih = DateTime.Parse(reader["MessageCreateDate"].ToString()).ToShortDateString()
                                    });
                            }
                        }
                    }
                }
                using (var command = new SqlCommand("Select COUNT(*) From VisitorMessages  ", connection))
                {
                    if (!String.IsNullOrWhiteSpace(whereStr))
                        command.CommandText += " WHERE " + whereStr;


                    resultTotal = Convert.ToInt64(command.ExecuteScalar());
                }
            }
            return new { data = visitorMessages, totaldata = resultTotal };
        }

ajaxTableCreater Version 1.1.0 Özellikleri :
•Dil desteği eklendi. ajaxTableCreater-lang.js dosyası

ajaxTableCreater Version 1.0.0 Özellikleri :
•Verileri asenkron olarak çeker ve listeler
•Sayfalama yapısı Önceki ve Sonraki butonları ve aralarında bir input boxda sayfa belirlenir. Tıklayıp aramak yerine elle yazıp direk gitmeleri pratik geldiği için bu şekilde yapıldı.
•Sütunları kullanıcının verdiği isimlere göre otomatik oluşturur
•Sütunlar tıklandığında ilk önce “ASC” sonra “DESC” olarak en sonunda eski haline dönerek sıralama yapar
•Kullanıcının içeriğini ayarlayabileceği bir İşlemler sütunu bulunmaktadır. Kullanıcı istemediği taktirde kaldırılabiliyor.
•Sol üstte dropboxta “10,25,50,100″ seçenekleri ile sayfada kaç veri gösterileceği ayarlanabiliyor.
•Sağ üstteki arama kutusundan kullanıcının ayarladığı şekilde arama yapılabiliyor.
•Primary sütununun görülüp görünmeyeceği kullanıcıya bırakıldı.
•Kullanıcının istediği zaman tablo yenileyebilmesi için fnTableRefreshData metodu eklendi.
•Her <tr> tag ının ID attribute ne Primary Key değeri atanmıştır.