folder Tahribat.com Forumları
linefolder Html - CSS - XML - JavaScript - Ajax
linefolder Datatable İle Sayfalama Yapma Problemi.



Datatable İle Sayfalama Yapma Problemi.

  1. KısayolKısayol reportŞikayet pmÖzel Mesaj
    manglerman
    manglerman's avatar
    Kayıt Tarihi: 30/Aralık/2003
    Erkek
    Diffstorm bunu yazdı
    manglerman bunu yazdı
    whopper bunu yazdı
    biri bunu yazdı

    datatable zaten kendisi sayfalama yapıyor. Tüm veriyi sayfaya göndermeniz yeterli olur. 

    oyle sacma sey mi olur. pagination olayi zaten sunucundan sayili veri getirip requestlerdeki, dolayisiyla sunucudaki yuku azaltmak. requestle birlikte gelen index, offset bilgilerini db sorgunda kullanman lazim.

     

    çok sert girme hocam :) normalde evet öyle ama mantıken 150-200 den fazla kaydın kesinlikle girilmeyeceği ekranlar için ben de benzer mantık uyguluyorum. getall ile hepsini çekip basıyorum frontend sayfalamasını yapıyor rahat rahat.

    Hocam peki geniş tablolar için bunu kullanamayiz  mi ? Yardım  edebileceklere  olmaz ise maddi yardım edebilirim.

    teknik olarak mümkün ama mantık olarak ters. client tarafı aşırı yavaşlatır browseri kitleyebilir. senin server performansını da olumsuz etkiler ben .net core ile şu şekilde çözdüm.

    HTML

    <div class="container-fluid">
	<table id="DynamicDatatable" class="table" style="width:100%!important">
		<thead class="table-light">
		</thead>
		<tbody>
		</tbody>
	</table>
</div>

    JS

    CreateDatatable();

function CreateDatatable() {
	var table = $('#DynamicDatatable').DataTable({
		"lengthMenu": [[10, 25, 50, 100], [10, 25, 50, 100]],
		"pageLength": 25,
		"destroy": true,
		"proccessing": true,
		"serverSide": true,
		"lengthChange": true,
		"ordering": false,
		"processing": true,
		"ajax": {
			url: "/Ajax/DatatableEyeCheck?p1=" + v1+ "&p2=" + v2+ "&p3=" + v3+ "&p4=" + v4,
			type: 'GET',
			contentType: 'application/json',
			data: function(d) {
				return JSON.stringify(d);
			},
		},
		"language": {
			"search": "",
			"searchPlaceholder": "Search..."
		},
		createdRow: function(row, data, dataIndex) {
			if (data.coldCase == "1") {
				$(row).addClass('text-primary');
			}
		},
		"initComplete": function(settings, json) {
			$('#DynamicDatatable_filter input').unbind();
			$('#DynamicDatatable_filter input').bind('keyup', function(e) {
				if (e.keyCode == 13) {
					table.search(this.value).draw();
				}
			});
		},
		"columns": [
			{
				data: 'refno',
				title: 'RefNo',
				render: function(data, type, item) {
					return item.refNo;
				},
			},
			{
				data: 'tarih',
				title: 'Tarih',
				render: function(data, type, item) {
					return item.tarihString;
				},
			},
			{
				data: 'Name',
				title: 'Name',
				render: function(data, type, item) {
					return item.name;
				},
			}
		]
	});
}

    .NET CORE SEARCH METHOD

    public async Task DatatableEyeCheck(DataTableAjaxPostModel model, int SoforId = 0)
{
	var all = HttpContext.Request.QueryString.Value;
	if (all != default)
	{
		string s = all.Split("&")[all.Split("&").Length - 2];
		s = s.Replace("?", "");
		s = s.Replace("%22", @"""");
		s = s.Replace("%20", @" ");
		model = JsonConvert.DeserializeObject(s);
	}
	string searchBy = Utils.StringHelper.HTMLEncodeSpecialChars((model.search != null) ? model.search.value : null);

	var take = model.length;
	var skip = model.start;

	string sortBy = "";
	bool sortDir = true;

	if (model.order != null && model.order.Count > 0)
	{
		sortBy = model.columns[model.order[0].column].data;
		sortDir = model.order[0].dir.ToLower() == "asc";
	}

	ICollection res = new List();
	int filteredCount = 0;
	int currentPage = 1;
	if (model.start > 0)
	{
		currentPage = model.start / model.length;
		currentPage++;
	}
	string spName = "Eye_Check";
	List parameters = new List()
	{
		new SqlParameter(){ ParameterName="@p1", Value=Request.Query["v1"].ToString() },
		new SqlParameter(){ ParameterName="@p2", Value=Request.Query["v2"].ToString() },
		new SqlParameter(){ ParameterName="@p3", Value=Request.Query["v3"].ToString() },
		new SqlParameter(){ ParameterName="@p4", Value=Request.Query["v4"].ToString() },
	};

	DataTable dt = _datatableService.GetDataTable(spName, parameters.ToArray());

	if (dt.Rows.Count > 0)
	{
		res = dt.AsEnumerable().Select(row =>
		new Eye_Check
		{
				
			RefNo = row.Field("RefNo"),
			Tarih = row.Field("Tarih"),
			Name = row.Field("Name"),
		}).ToList();
		filteredCount = int.Parse(dt.Rows[0]["TotalCount"].ToString());
	}

	return Json(new
	{
		draw = model.draw,
		recordsTotal = filteredCount,
		recordsFiltered = filteredCount,
		data = res
	});
}

     

    PAGING MODEL

    namespace Project.AjaxModels
{
    public class DataTableAjaxPostModel
    {
        // properties are not capital due to json mapping
        public int draw { get; set; }
        public int start { get; set; }
        public int length { get; set; }
        public List columns { get; set; }
        public Search search { get; set; }
        public List order { get; set; }
    }

    public class Column
    {
        public string data { get; set; }
        public string name { get; set; }
        public bool searchable { get; set; }
        public bool orderable { get; set; }
        public Search search { get; set; }
    }

    public class Search
    {
        public string value { get; set; }
        public string regex { get; set; }
    }

    public class Order
    {
        public int column { get; set; }
        public string dir { get; set; }
    }
}

     

    php hiç anlamam. datatablenin plugininin paging için backend'e gönderdiği default bir request model ve backendden aldığı default bir response model var.

    bu modelleri ben .net core da manuel oluşturdum sen de aşağıdaki linkten ulaşıp kendine göre oluşturabilirsin

     

    https://datatables.net/manual/server-side#Returned-data

     

    kolay gelsin.

     

     

     

     

     

    manglerman tarafından 15/Kas/22 13:53 tarihinde düzenlenmiştir
    türk kızlarından sabun yapalım, rus kızları elini yıkasın.:)
    Reply With Quote Alıntı yap
  2. KısayolKısayol reportŞikayet pmÖzel Mesaj
    biri
    biri's avatar
    Kayıt Tarihi: 03/Ocak/2009
    Erkek
    whopper bunu yazdı
    biri bunu yazdı

    datatable zaten kendisi sayfalama yapıyor. Tüm veriyi sayfaya göndermeniz yeterli olur. 

    oyle sacma sey mi olur. pagination olayi zaten sunucundan sayili veri getirip requestlerdeki, dolayisiyla sunucudaki yuku azaltmak. requestle birlikte gelen index, offset bilgilerini db sorgunda kullanman lazim.

     

    Neyse kırmayalım kimseyi :)

    biri tarafından 15/Kas/22 20:55 tarihinde düzenlenmiştir
    ¯\(ツ)/¯ ฏ๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎๎
    Reply With Quote Alıntı yap
  3. KısayolKısayol reportŞikayet pmÖzel Mesaj
    Diffstorm
    Diffstorm's avatar
    Kayıt Tarihi: 05/Temmuz/2008
    Erkek
    manglerman bunu yazdı
    Diffstorm bunu yazdı
    manglerman bunu yazdı
    whopper bunu yazdı
    biri bunu yazdı

    datatable zaten kendisi sayfalama yapıyor. Tüm veriyi sayfaya göndermeniz yeterli olur. 

    oyle sacma sey mi olur. pagination olayi zaten sunucundan sayili veri getirip requestlerdeki, dolayisiyla sunucudaki yuku azaltmak. requestle birlikte gelen index, offset bilgilerini db sorgunda kullanman lazim.

     

    çok sert girme hocam :) normalde evet öyle ama mantıken 150-200 den fazla kaydın kesinlikle girilmeyeceği ekranlar için ben de benzer mantık uyguluyorum. getall ile hepsini çekip basıyorum frontend sayfalamasını yapıyor rahat rahat.

    Hocam peki geniş tablolar için bunu kullanamayiz  mi ? Yardım  edebileceklere  olmaz ise maddi yardım edebilirim.

    teknik olarak mümkün ama mantık olarak ters. client tarafı aşırı yavaşlatır browseri kitleyebilir. senin server performansını da olumsuz etkiler ben .net core ile şu şekilde çözdüm.

    HTML

     

    JS

    CreateDatatable();

function CreateDatatable() {
	var table = $('#DynamicDatatable').DataTable({
		"lengthMenu": [[10, 25, 50, 100], [10, 25, 50, 100]],
		"pageLength": 25,
		"destroy": true,
		"proccessing": true,
		"serverSide": true,
		"lengthChange": true,
		"ordering": false,
		"processing": true,
		"ajax": {
			url: "/Ajax/DatatableEyeCheck?p1=" + v1+ "&p2=" + v2+ "&p3=" + v3+ "&p4=" + v4,
			type: 'GET',
			contentType: 'application/json',
			data: function(d) {
				return JSON.stringify(d);
			},
		},
		"language": {
			"search": "",
			"searchPlaceholder": "Search..."
		},
		createdRow: function(row, data, dataIndex) {
			if (data.coldCase == "1") {
				$(row).addClass('text-primary');
			}
		},
		"initComplete": function(settings, json) {
			$('#DynamicDatatable_filter input').unbind();
			$('#DynamicDatatable_filter input').bind('keyup', function(e) {
				if (e.keyCode == 13) {
					table.search(this.value).draw();
				}
			});
		},
		"columns": [
			{
				data: 'refno',
				title: 'RefNo',
				render: function(data, type, item) {
					return item.refNo;
				},
			},
			{
				data: 'tarih',
				title: 'Tarih',
				render: function(data, type, item) {
					return item.tarihString;
				},
			},
			{
				data: 'Name',
				title: 'Name',
				render: function(data, type, item) {
					return item.name;
				},
			}
		]
	});
}

    .NET CORE SEARCH METHOD

    public async Task DatatableEyeCheck(DataTableAjaxPostModel model, int SoforId = 0)
{
	var all = HttpContext.Request.QueryString.Value;
	if (all != default)
	{
		string s = all.Split("&")[all.Split("&").Length - 2];
		s = s.Replace("?", "");
		s = s.Replace("%22", @"""");
		s = s.Replace("%20", @" ");
		model = JsonConvert.DeserializeObject(s);
	}
	string searchBy = Utils.StringHelper.HTMLEncodeSpecialChars((model.search != null) ? model.search.value : null);

	var take = model.length;
	var skip = model.start;

	string sortBy = "";
	bool sortDir = true;

	if (model.order != null && model.order.Count > 0)
	{
		sortBy = model.columns[model.order[0].column].data;
		sortDir = model.order[0].dir.ToLower() == "asc";
	}

	ICollection res = new List();
	int filteredCount = 0;
	int currentPage = 1;
	if (model.start > 0)
	{
		currentPage = model.start / model.length;
		currentPage++;
	}
	string spName = "Eye_Check";
	List parameters = new List()
	{
		new SqlParameter(){ ParameterName="@p1", Value=Request.Query["v1"].ToString() },
		new SqlParameter(){ ParameterName="@p2", Value=Request.Query["v2"].ToString() },
		new SqlParameter(){ ParameterName="@p3", Value=Request.Query["v3"].ToString() },
		new SqlParameter(){ ParameterName="@p4", Value=Request.Query["v4"].ToString() },
	};

	DataTable dt = _datatableService.GetDataTable(spName, parameters.ToArray());

	if (dt.Rows.Count > 0)
	{
		res = dt.AsEnumerable().Select(row =>
		new Eye_Check
		{
				
			RefNo = row.Field("RefNo"),
			Tarih = row.Field("Tarih"),
			Name = row.Field("Name"),
		}).ToList();
		filteredCount = int.Parse(dt.Rows[0]["TotalCount"].ToString());
	}

	return Json(new
	{
		draw = model.draw,
		recordsTotal = filteredCount,
		recordsFiltered = filteredCount,
		data = res
	});
}

     

    PAGING MODEL

    namespace Project.AjaxModels
{
    public class DataTableAjaxPostModel
    {
        // properties are not capital due to json mapping
        public int draw { get; set; }
        public int start { get; set; }
        public int length { get; set; }
        public List columns { get; set; }
        public Search search { get; set; }
        public List order { get; set; }
    }

    public class Column
    {
        public string data { get; set; }
        public string name { get; set; }
        public bool searchable { get; set; }
        public bool orderable { get; set; }
        public Search search { get; set; }
    }

    public class Search
    {
        public string value { get; set; }
        public string regex { get; set; }
    }

    public class Order
    {
        public int column { get; set; }
        public string dir { get; set; }
    }
}

     

    php hiç anlamam. datatablenin plugininin paging için backend'e gönderdiği default bir request model ve backendden aldığı default bir response model var.

    bu modelleri ben .net core da manuel oluşturdum sen de aşağıdaki linkten ulaşıp kendine göre oluşturabilirsin

     

    https://datatables.net/manual/server-side#Returned-data

     

    kolay gelsin.

     

     

     

     

     

    Teşekkür ederim hocam .  .net olsa idi biraz daha hakim olurdum da php ile yazılmış, artık biseyler  çıkarmaya çalışicam.

    Reply With Quote Alıntı yap
Toplam Hit: 5219 Toplam Mesaj: 14
php jquery datatable tablo