{"id":67647,"date":"2016-12-12T14:30:38","date_gmt":"2016-12-12T14:30:38","guid":{"rendered":"http:\/\/webkul.com\/blog\/?p=67647"},"modified":"2016-12-12T14:33:24","modified_gmt":"2016-12-12T14:33:24","slug":"create-render-list-search-front-end-using-datatable","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/create-render-list-search-front-end-using-datatable\/","title":{"rendered":"Create render list search in front end using dataTable"},"content":{"rendered":"

Create render list search in front end using dataTable plugin (jQuery). If you are using dataTable to create your table for displaying information on your front controller then this post may help you to create new search just like prestashop create in renderList.<\/p>\n

Let create a demo table for showing some information like –<\/p>\n

<div class=\"order_table\">\r\n\t<table class=\"table table-hover\" id=\"my-orders-table\">\r\n\t\t<thead>\r\n\t\t\t<tr>\r\n\t\t\t\t<th class=\"no-sort\">{l s='ID' mod='module_name'}<\/th>\r\n\t\t\t\t<th class=\"no-sort\">{l s='Reference' mod='module_name'}<\/th>\r\n\t\t\t\t<th class=\"no-sort\">{l s='Total' mod='module_name'}<\/th>\r\n\t\t\t\t<th class=\"no-sort\">{l s='Payment' mod='module_name'}<\/th>\r\n\t\t\t\t<th class=\"no-sort\">{l s='Date' mod='module_name'}<\/th>\r\n\t\t\t<\/tr>\r\n\t\t<\/thead>\r\n\t\t<tbody>\r\n\t\t\t{if isset($myorders)}\r\n\t\t\t\t{foreach $myorders as $order}\r\n\t\t\t\t<tr class=\"order_row\">\r\n\t\t\t\t\t<th>{$order.id}<\/th>\r\n\t\t\t\t\t<th>{$order.reference}<\/th>\r\n\t\t\t\t\t<th>{$order.total}<\/th>\r\n\t\t\t\t\t<th>{$order.payment}<\/th>\r\n\t\t\t\t\t<th>{$order.date}<\/th>\r\n\t\t\t\t<\/tr>\r\n\t\t\t\t{\/foreach}\r\n\t\t\t{\/if}\r\n\t\t<\/tbody>\r\n\t<\/table>\r\n<\/div><\/pre>\n
Above code will create a table \u00a0with order information. After this we need to initialize our dataTable, so we can work further to create search field for each column.<\/p>\n
Note<\/strong> – To create each column search we need to use updated library of dataTable, Current version is\u00a01.10.13 (Till Date). If you’re using older version then it might not be supported and will throw JS error as well.<\/p>\n
JS Code to create search box for each column \u00a0–<\/p>\n
\/\/ Setup - add a text input to each column\r\n$('#my-orders-table thead th').each( function () {\r\n    var title = $(this).text();\r\n    $(this).html( '<input class=\"form-control col-md-2\" type=\"text\" placeholder=\"Title of field\"\/>' );\r\n});\r\n\r\n<\/pre>\n
JS code to make each column searchable : –<\/p>\n
$(document).ready(function() {\r\n    \/\/ DataTable\r\n    var table = $('#my-orders-table').DataTable();\r\n    \/\/ Apply the search\r\n    table.columns().eq( 0 ).each( function ( colIdx ) {\r\n        $( 'input', table.column( colIdx ).header() ).on( 'keyup change', function () {\r\n            table\r\n                .column( colIdx )\r\n                .search( this.value )\r\n                .draw();\r\n        });\r\n    });\r\n});<\/pre>\n
In the above code… first we have initialized our table with DataTable() function and store it\u00a0in a javascript variable name table<\/strong>.<\/p>\n
Now, we can use each function of javascript to make each column as searchable by using column() function of dataTable.<\/p>\n
By using these few line of js code, we can implement each column search for our table.<\/p>\n
See the out in the screenshot…<\/p>\n
\"DataTable\"<\/a><\/p>\n
 <\/p>\n","protected":false},"excerpt":{"rendered":"
Create render list search in front end using dataTable plugin (jQuery). If you are using dataTable to create your table for displaying information on your front controller then this post may help you to create new search just like prestashop create in renderList. Let create a demo table for showing some information like – <div […]<\/a><\/p>\n","protected":false},"author":81,"featured_media":67446,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[13,209],"tags":[4138,4135,4139,2065,4137,4136],"class_list":["post-67647","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-php","category-prestashop","tag-column","tag-datatabel","tag-each","tag-prestashop","tag-search","tag-searchable"],"yoast_head":"\nCreate render list search in front end using dataTable - Webkul Blog<\/title>\n<meta name=\"description\" content=\"Create render list search in front end using dataTable plugin (jQuery). If you are using dataTable to create your table for displaying information on your..\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/create-render-list-search-front-end-using-datatable\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create render list search in front end using dataTable - Webkul Blog\" \/>\n<meta property=\"og:description\" content=\"Create render list search in front end using dataTable plugin (jQuery). If you are using dataTable to create your table for displaying information on your..\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/create-render-list-search-front-end-using-datatable\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2016-12-12T14:30:38+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2016-12-12T14:33:24+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/12\/Blog-image.png\" \/>\n\t<meta property=\"og:image:width\" content=\"825\" \/>\n\t<meta property=\"og:image:height\" content=\"260\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Deepak\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Deepak\" \/>\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:\/\/webkul.com\/blog\/create-render-list-search-front-end-using-datatable\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/create-render-list-search-front-end-using-datatable\/\"},\"author\":{\"name\":\"Deepak\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/06a72f75a5d335e9751297fb9839ef68\"},\"headline\":\"Create render list search in front end using dataTable\",\"datePublished\":\"2016-12-12T14:30:38+00:00\",\"dateModified\":\"2016-12-12T14:33:24+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/create-render-list-search-front-end-using-datatable\/\"},\"wordCount\":214,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/create-render-list-search-front-end-using-datatable\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/12\/Blog-image.png\",\"keywords\":[\"column\",\"datatabel\",\"each\",\"prestashop\",\"search\",\"searchable\"],\"articleSection\":[\"php\",\"prestashop\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/create-render-list-search-front-end-using-datatable\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/create-render-list-search-front-end-using-datatable\/\",\"url\":\"https:\/\/webkul.com\/blog\/create-render-list-search-front-end-using-datatable\/\",\"name\":\"Create render list search in front end using dataTable - Webkul Blog\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/create-render-list-search-front-end-using-datatable\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/create-render-list-search-front-end-using-datatable\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/12\/Blog-image.png\",\"datePublished\":\"2016-12-12T14:30:38+00:00\",\"dateModified\":\"2016-12-12T14:33:24+00:00\",\"description\":\"Create render list search in front end using dataTable plugin (jQuery). If you are using dataTable to create your table for displaying information on your..\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/create-render-list-search-front-end-using-datatable\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/create-render-list-search-front-end-using-datatable\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/create-render-list-search-front-end-using-datatable\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/12\/Blog-image.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/12\/Blog-image.png\",\"width\":825,\"height\":260},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/create-render-list-search-front-end-using-datatable\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Create render list search in front end using dataTable\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/06a72f75a5d335e9751297fb9839ef68\",\"name\":\"Deepak\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/067dbf448c072fa8c6cb14b2e26949dc29c46c534e586b915b56f39c95cb2b95?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/067dbf448c072fa8c6cb14b2e26949dc29c46c534e586b915b56f39c95cb2b95?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Deepak\"},\"description\":\"I love the web. Coding is my passion and love the learn new technologies.\",\"url\":\"https:\/\/webkul.com\/blog\/author\/deepak037\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Create render list search in front end using dataTable - Webkul Blog","description":"Create render list search in front end using dataTable plugin (jQuery). If you are using dataTable to create your table for displaying information on your..","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:\/\/webkul.com\/blog\/create-render-list-search-front-end-using-datatable\/","og_locale":"en_US","og_type":"article","og_title":"Create render list search in front end using dataTable - Webkul Blog","og_description":"Create render list search in front end using dataTable plugin (jQuery). If you are using dataTable to create your table for displaying information on your..","og_url":"https:\/\/webkul.com\/blog\/create-render-list-search-front-end-using-datatable\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2016-12-12T14:30:38+00:00","article_modified_time":"2016-12-12T14:33:24+00:00","og_image":[{"width":825,"height":260,"url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/12\/Blog-image.png","type":"image\/png"}],"author":"Deepak","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Deepak","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/create-render-list-search-front-end-using-datatable\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/create-render-list-search-front-end-using-datatable\/"},"author":{"name":"Deepak","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/06a72f75a5d335e9751297fb9839ef68"},"headline":"Create render list search in front end using dataTable","datePublished":"2016-12-12T14:30:38+00:00","dateModified":"2016-12-12T14:33:24+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/create-render-list-search-front-end-using-datatable\/"},"wordCount":214,"commentCount":0,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/create-render-list-search-front-end-using-datatable\/#primaryimage"},"thumbnailUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/12\/Blog-image.png","keywords":["column","datatabel","each","prestashop","search","searchable"],"articleSection":["php","prestashop"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/create-render-list-search-front-end-using-datatable\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/create-render-list-search-front-end-using-datatable\/","url":"https:\/\/webkul.com\/blog\/create-render-list-search-front-end-using-datatable\/","name":"Create render list search in front end using dataTable - Webkul Blog","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/create-render-list-search-front-end-using-datatable\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/create-render-list-search-front-end-using-datatable\/#primaryimage"},"thumbnailUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/12\/Blog-image.png","datePublished":"2016-12-12T14:30:38+00:00","dateModified":"2016-12-12T14:33:24+00:00","description":"Create render list search in front end using dataTable plugin (jQuery). If you are using dataTable to create your table for displaying information on your..","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/create-render-list-search-front-end-using-datatable\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/create-render-list-search-front-end-using-datatable\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/create-render-list-search-front-end-using-datatable\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/12\/Blog-image.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/12\/Blog-image.png","width":825,"height":260},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/create-render-list-search-front-end-using-datatable\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Create render list search in front end using dataTable"}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/06a72f75a5d335e9751297fb9839ef68","name":"Deepak","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/067dbf448c072fa8c6cb14b2e26949dc29c46c534e586b915b56f39c95cb2b95?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/067dbf448c072fa8c6cb14b2e26949dc29c46c534e586b915b56f39c95cb2b95?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Deepak"},"description":"I love the web. Coding is my passion and love the learn new technologies.","url":"https:\/\/webkul.com\/blog\/author\/deepak037\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/67647","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/81"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=67647"}],"version-history":[{"count":12,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/67647\/revisions"}],"predecessor-version":[{"id":67672,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/67647\/revisions\/67672"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media\/67446"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=67647"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=67647"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=67647"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}