{"id":36,"date":"2020-05-29T19:57:17","date_gmt":"2020-05-29T19:57:17","guid":{"rendered":"https:\/\/okankaradag.com\/?p=36"},"modified":"2021-06-16T11:32:27","modified_gmt":"2021-06-16T11:32:27","slug":"jquery-ile-datatable-plugini-nasil-kullanilir","status":"publish","type":"post","link":"https:\/\/okankaradag.com\/en\/jquery\/jquery-ile-datatable-plugini-nasil-kullanilir","title":{"rendered":"Jquery ile Datatable Plugini Nas\u0131l Kullan\u0131l\u0131r?"},"content":{"rendered":"

Merhaba, Bu makalede \u00e7ok s\u0131k kullan\u0131lan datatable pluginini, projemizde nas\u0131l kullanabiliriz onu inceleyece\u011fiz<\/p>\n\n\n\n

\u00d6ncelikle datatable plugunini kullanabilmek i\u00e7in a\u015fa\u011f\u0131daki jquery, bootstrap, ve datatable cdnlerini projemize ekleyelim.<\/p>\n\n\n\n

<link rel=\"stylesheet\" href=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.5.0\/css\/bootstrap.min.css\">\n<link rel=\"stylesheet\" href=\"https:\/\/cdn.datatables.net\/1.10.21\/css\/dataTables.bootstrap4.min.css\">\n\n<script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/3.5.1\/jquery.min.js\"><\/script>\n<script src=\"https:\/\/maxcdn.bootstrapcdn.com\/bootstrap\/4.5.0\/js\/bootstrap.min.js\"><\/script>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/popper.js\/1.16.0\/umd\/popper.min.js\"><\/script>\n<script src=\"https:\/\/cdn.datatables.net\/1.10.21\/js\/jquery.dataTables.min.js\"><\/script>\n<script src=\"https:\/\/cdn.datatables.net\/1.10.21\/js\/dataTables.bootstrap4.min.js\"><\/script><\/pre><\/div>\n\n\n\n
\u0130sterseniz bu cdnleri indirip local olarak da kullanabilirsiniz.<\/p>\n\n\n\n
Cdnlerimiz haz\u0131r \u015fimdi datatable pluginin \u00e7al\u0131\u015fabilmesi i\u00e7in tablo yap\u0131m\u0131z a\u015fa\u011f\u0131daki gibi olmal\u0131d\u0131r <thead><\/strong> ve <tbody><\/strong> tagleri ve <table> elementinin class\u0131nda mutlaka table<\/strong> olmal\u0131.<\/p>\n\n\n\n
<table id="example" class="table table-striped table-bordered">\n   <thead>\n      <tr>\n        <th>Ad<\/th>\n        <th>Soyad<\/th>\n        <th>Yas<\/th>\n       <\/tr>\n    <\/thead>\n    <tbody>\n       <tr>\n          <td>Ahmet<\/td>\n          <td>Y\u0131lmaz<\/td>\n          <td>23<\/td>\n       <\/tr>\n       <tr>\n          <td>Mehmet<\/td>\n          <td>Öztürk<\/td>\n          <td>24<\/td>\n      <\/tr>\n    <\/tbody>\n<\/table><\/pre><\/div>\n\n\n\n
Datatable ilgili cdn’lerimiz ve tablomuz haz\u0131r,  \u015fimdi ise jquery ile datatable plugunini aktif edelim, a\u015fa\u011f\u0131da yaz\u0131lan kodu projenize ekledi\u011finizde datatable sorunsuz \u00e7al\u0131\u015facakt\u0131r.<\/p>\n\n\n\n
<script>\n    $(document).ready(function () {\n       $('#example').DataTable();\n    });\n<\/script><\/pre><\/div>\n\n\n\n
\u00d6rnek bir g\u00f6r\u00fcn\u00fcm\u00fc de a\u015fa\u011f\u0131daki gibidir.<\/p>\n\n\n\n
\"\"<\/figure>\n\n\n\n
L\u00fctfen g\u00f6r\u00fc\u015f ve yorumlar\u0131n\u0131z\u0131 belirtmeyi unutmay\u0131n<\/p>","protected":false},"excerpt":{"rendered":"
Merhaba, Bu makalede \u00e7ok s\u0131k kullan\u0131lan datatable pluginini, projemizde nas\u0131l kullanabiliriz onu inceleyece\u011fiz \u00d6ncelikle datatable plugunini kullanabilmek i\u00e7in a\u015fa\u011f\u0131daki jquery, bootstrap, ve datatable cdnlerini projemize ekleyelim. \u0130sterseniz bu cdnleri indirip local olarak da kullanabilirsiniz....<\/p>","protected":false},"author":1,"featured_media":94,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[9,8],"tags":[11,10,12],"yoast_head":"\nJquery ile Datatable Plugini Nas\u0131l Kullan\u0131l\u0131r? - Okan Karada\u011f<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/okankaradag.com\/en\/jquery\/jquery-ile-datatable-plugini-nasil-kullanilir\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Jquery ile Datatable Plugini Nas\u0131l Kullan\u0131l\u0131r? - Okan Karada\u011f\" \/>\n<meta property=\"og:description\" content=\"Merhaba, Bu makalede \u00e7ok s\u0131k kullan\u0131lan datatable pluginini, projemizde nas\u0131l kullanabiliriz onu inceleyece\u011fiz \u00d6ncelikle datatable plugunini kullanabilmek i\u00e7in a\u015fa\u011f\u0131daki jquery, bootstrap, ve datatable cdnlerini projemize ekleyelim. \u0130sterseniz bu cdnleri indirip local olarak da kullanabilirsiniz....\" \/>\n<meta property=\"og:url\" content=\"https:\/\/okankaradag.com\/en\/jquery\/jquery-ile-datatable-plugini-nasil-kullanilir\/\" \/>\n<meta property=\"og:site_name\" content=\"Okan Karada\u011f\" \/>\n<meta property=\"article:published_time\" content=\"2020-05-29T19:57:17+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2021-06-16T11:32:27+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/okankaradag.com\/wp-content\/uploads\/2020\/05\/jquery-logo-vector-download.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"512\" \/>\n\t<meta property=\"og:image:height\" content=\"512\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Okan Karada\u011f\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Okan Karada\u011f\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/okankaradag.com\/jquery\/jquery-ile-datatable-plugini-nasil-kullanilir#article\",\"isPartOf\":{\"@id\":\"https:\/\/okankaradag.com\/jquery\/jquery-ile-datatable-plugini-nasil-kullanilir\"},\"author\":{\"name\":\"Okan Karada\u011f\",\"@id\":\"https:\/\/okankaradag.com\/#\/schema\/person\/0196919c5e3b6a496101ded872640d52\"},\"headline\":\"Jquery ile Datatable Plugini Nas\u0131l Kullan\u0131l\u0131r?\",\"datePublished\":\"2020-05-29T19:57:17+00:00\",\"dateModified\":\"2021-06-16T11:32:27+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/okankaradag.com\/jquery\/jquery-ile-datatable-plugini-nasil-kullanilir\"},\"wordCount\":140,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/okankaradag.com\/#\/schema\/person\/0196919c5e3b6a496101ded872640d52\"},\"keywords\":[\"bootstrap\",\"datatable\",\"jquery\"],\"articleSection\":[\"JavaScript\",\"Jquery\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/okankaradag.com\/jquery\/jquery-ile-datatable-plugini-nasil-kullanilir#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/okankaradag.com\/jquery\/jquery-ile-datatable-plugini-nasil-kullanilir\",\"url\":\"https:\/\/okankaradag.com\/jquery\/jquery-ile-datatable-plugini-nasil-kullanilir\",\"name\":\"Jquery ile Datatable Plugini Nas\u0131l Kullan\u0131l\u0131r? - Okan Karada\u011f\",\"isPartOf\":{\"@id\":\"https:\/\/okankaradag.com\/#website\"},\"datePublished\":\"2020-05-29T19:57:17+00:00\",\"dateModified\":\"2021-06-16T11:32:27+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/okankaradag.com\/jquery\/jquery-ile-datatable-plugini-nasil-kullanilir#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/okankaradag.com\/jquery\/jquery-ile-datatable-plugini-nasil-kullanilir\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/okankaradag.com\/jquery\/jquery-ile-datatable-plugini-nasil-kullanilir#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/okankaradag.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Jquery ile Datatable Plugini Nas\u0131l Kullan\u0131l\u0131r?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/okankaradag.com\/#website\",\"url\":\"https:\/\/okankaradag.com\/\",\"name\":\"Okan Karada\u011f\",\"description\":\"Programlama \u00dczerine\",\"publisher\":{\"@id\":\"https:\/\/okankaradag.com\/#\/schema\/person\/0196919c5e3b6a496101ded872640d52\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/okankaradag.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/okankaradag.com\/#\/schema\/person\/0196919c5e3b6a496101ded872640d52\",\"name\":\"Okan Karada\u011f\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/okankaradag.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/ca08a5537d7e304914c37189abedd2a1?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/ca08a5537d7e304914c37189abedd2a1?s=96&d=mm&r=g\",\"caption\":\"Okan Karada\u011f\"},\"logo\":{\"@id\":\"https:\/\/okankaradag.com\/#\/schema\/person\/image\/\"},\"sameAs\":[\"https:\/\/okankaradag.com\"],\"url\":\"https:\/\/okankaradag.com\/en\/author\/admin\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Jquery ile Datatable Plugini Nas\u0131l Kullan\u0131l\u0131r? - Okan Karada\u011f","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/okankaradag.com\/en\/jquery\/jquery-ile-datatable-plugini-nasil-kullanilir\/","og_locale":"en_US","og_type":"article","og_title":"Jquery ile Datatable Plugini Nas\u0131l Kullan\u0131l\u0131r? - Okan Karada\u011f","og_description":"Merhaba, Bu makalede \u00e7ok s\u0131k kullan\u0131lan datatable pluginini, projemizde nas\u0131l kullanabiliriz onu inceleyece\u011fiz \u00d6ncelikle datatable plugunini kullanabilmek i\u00e7in a\u015fa\u011f\u0131daki jquery, bootstrap, ve datatable cdnlerini projemize ekleyelim. \u0130sterseniz bu cdnleri indirip local olarak da kullanabilirsiniz....","og_url":"https:\/\/okankaradag.com\/en\/jquery\/jquery-ile-datatable-plugini-nasil-kullanilir\/","og_site_name":"Okan Karada\u011f","article_published_time":"2020-05-29T19:57:17+00:00","article_modified_time":"2021-06-16T11:32:27+00:00","og_image":[{"width":512,"height":512,"url":"https:\/\/okankaradag.com\/wp-content\/uploads\/2020\/05\/jquery-logo-vector-download.jpg","type":"image\/jpeg"}],"author":"Okan Karada\u011f","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Okan Karada\u011f","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/okankaradag.com\/jquery\/jquery-ile-datatable-plugini-nasil-kullanilir#article","isPartOf":{"@id":"https:\/\/okankaradag.com\/jquery\/jquery-ile-datatable-plugini-nasil-kullanilir"},"author":{"name":"Okan Karada\u011f","@id":"https:\/\/okankaradag.com\/#\/schema\/person\/0196919c5e3b6a496101ded872640d52"},"headline":"Jquery ile Datatable Plugini Nas\u0131l Kullan\u0131l\u0131r?","datePublished":"2020-05-29T19:57:17+00:00","dateModified":"2021-06-16T11:32:27+00:00","mainEntityOfPage":{"@id":"https:\/\/okankaradag.com\/jquery\/jquery-ile-datatable-plugini-nasil-kullanilir"},"wordCount":140,"commentCount":0,"publisher":{"@id":"https:\/\/okankaradag.com\/#\/schema\/person\/0196919c5e3b6a496101ded872640d52"},"keywords":["bootstrap","datatable","jquery"],"articleSection":["JavaScript","Jquery"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/okankaradag.com\/jquery\/jquery-ile-datatable-plugini-nasil-kullanilir#respond"]}]},{"@type":"WebPage","@id":"https:\/\/okankaradag.com\/jquery\/jquery-ile-datatable-plugini-nasil-kullanilir","url":"https:\/\/okankaradag.com\/jquery\/jquery-ile-datatable-plugini-nasil-kullanilir","name":"Jquery ile Datatable Plugini Nas\u0131l Kullan\u0131l\u0131r? - Okan Karada\u011f","isPartOf":{"@id":"https:\/\/okankaradag.com\/#website"},"datePublished":"2020-05-29T19:57:17+00:00","dateModified":"2021-06-16T11:32:27+00:00","breadcrumb":{"@id":"https:\/\/okankaradag.com\/jquery\/jquery-ile-datatable-plugini-nasil-kullanilir#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/okankaradag.com\/jquery\/jquery-ile-datatable-plugini-nasil-kullanilir"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/okankaradag.com\/jquery\/jquery-ile-datatable-plugini-nasil-kullanilir#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/okankaradag.com\/"},{"@type":"ListItem","position":2,"name":"Jquery ile Datatable Plugini Nas\u0131l Kullan\u0131l\u0131r?"}]},{"@type":"WebSite","@id":"https:\/\/okankaradag.com\/#website","url":"https:\/\/okankaradag.com\/","name":"Okan Karada\u011f","description":"Programlama \u00dczerine","publisher":{"@id":"https:\/\/okankaradag.com\/#\/schema\/person\/0196919c5e3b6a496101ded872640d52"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/okankaradag.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/okankaradag.com\/#\/schema\/person\/0196919c5e3b6a496101ded872640d52","name":"Okan Karada\u011f","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/okankaradag.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/ca08a5537d7e304914c37189abedd2a1?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/ca08a5537d7e304914c37189abedd2a1?s=96&d=mm&r=g","caption":"Okan Karada\u011f"},"logo":{"@id":"https:\/\/okankaradag.com\/#\/schema\/person\/image\/"},"sameAs":["https:\/\/okankaradag.com"],"url":"https:\/\/okankaradag.com\/en\/author\/admin"}]}},"_links":{"self":[{"href":"https:\/\/okankaradag.com\/en\/wp-json\/wp\/v2\/posts\/36"}],"collection":[{"href":"https:\/\/okankaradag.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/okankaradag.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/okankaradag.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/okankaradag.com\/en\/wp-json\/wp\/v2\/comments?post=36"}],"version-history":[{"count":8,"href":"https:\/\/okankaradag.com\/en\/wp-json\/wp\/v2\/posts\/36\/revisions"}],"predecessor-version":[{"id":357,"href":"https:\/\/okankaradag.com\/en\/wp-json\/wp\/v2\/posts\/36\/revisions\/357"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/okankaradag.com\/en\/wp-json\/wp\/v2\/media\/94"}],"wp:attachment":[{"href":"https:\/\/okankaradag.com\/en\/wp-json\/wp\/v2\/media?parent=36"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/okankaradag.com\/en\/wp-json\/wp\/v2\/categories?post=36"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/okankaradag.com\/en\/wp-json\/wp\/v2\/tags?post=36"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}