{"id":2680,"date":"2015-03-30T12:15:51","date_gmt":"2015-03-30T09:15:51","guid":{"rendered":"http:\/\/www.webcodegeeks.com\/?p=2680"},"modified":"2017-12-21T17:21:28","modified_gmt":"2017-12-21T15:21:28","slug":"jquery-data-grid-control-example","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-data-grid-control-example\/","title":{"rendered":"jQuery Data Grid Control Example"},"content":{"rendered":"<p>In this example we will learn how to integrate a data grid plugin into a web application to display and manage many records of data instead of using the simple <code>table<\/code> element without manipulation.<\/p>\n<p>Most of these plugins provide a very flexible API to easily add\/edit\/remove records, paginate, sort and filter data based on predefined criteria.<\/p>\n<p>I have chosen for our example the popular <a title=\"DataTables Table plug-in for jQuery\" href=\"http:\/\/datatables.net\/\" target=\"_blank\">jQuery DataTables<\/a> plugin because it is a highly flexible tool arround the web, provide a beautiful, expressive API and it is free open source software.<br \/>\n&nbsp;<br \/>\n&nbsp;<br \/>\n&nbsp;<br \/>\n[ulp id=&#8217;qGGDqWnle19VavkM&#8217;]<\/p>\n<h3>Default Datatable Example<\/h3>\n<p>Before we start coding, we should download the plugin from the official website <a title=\"Download DataTables\" href=\"http:\/\/datatables.net\/download\/download\" target=\"_blank\">here<\/a>, I\u00a0will use for this example the latest version <code>1.10.5<\/code>.<\/p>\n<p>Now, create an HTML file called index.html then add link to jQuery library and datatable JavaScript and CSS files between the <code>head<\/code> tags.<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;link rel=&quot;stylesheet&quot; type=&quot;text\/css&quot; href=&quot;css\/jquery.dataTables.css&quot;&gt;\r\n&lt;script type=&quot;text\/javascript&quot; language=&quot;javascript&quot; src=&quot;js\/jquery.js&quot;&gt;&lt;\/script&gt;\r\n&lt;script type=&quot;text\/javascript&quot; language=&quot;javascript&quot; src=&quot;js\/jquery.dataTables.js&quot;&gt;&lt;\/script&gt;\r\n<\/pre>\n<p>Into the body tags, add a <code>table<\/code> element with the attribute <code>id=\"MyDT\"<\/code>.<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;table id=&quot;MyDT&quot; cellspacing=&quot;0&quot; width=&quot;100%&quot;&gt;\r\n<\/pre>\n<p><code>cellspacing=\"0\"<\/code> mean reduce the space between cells to zero.<\/p>\n<p>Now between the <code>table<\/code> tags, add the tags <code>thead<\/code>, <code>tbody<\/code> and <code>tfoot<\/code> like below.<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;table id=&quot;MyDT&quot; cellspacing=&quot;0&quot; width=&quot;100%&quot;&gt;\r\n  &lt;thead&gt;\r\n  ...\r\n  &lt;\/thead&gt;\r\n  &lt;tbody&gt;\r\n  ...\r\n  &lt;\/tbody&gt;\r\n  &lt;tfoot&gt;\r\n  ...\r\n  &lt;\/tfoot&gt;\r\n&lt;\/table&gt;\r\n<\/pre>\n<p>The <code>thead<\/code> and <code>tfoot<\/code> tags are responsible for displaying the columns titles at the header and the footer of table. Note that the number of cells must be identical in each section.<\/p>\n<p>After adding some records, the result of our tables is:<\/p>\n<figure id=\"attachment_2786\" aria-describedby=\"caption-attachment-2786\" style=\"width: 799px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/03\/Default-DataTables-example1.png\"><img decoding=\"async\" class=\"size-full wp-image-2786\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/03\/Default-DataTables-example1.png\" alt=\"Default HTML Table\" width=\"799\" height=\"402\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/03\/Default-DataTables-example1.png 799w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/03\/Default-DataTables-example1-300x151.png 300w\" sizes=\"(max-width: 799px) 100vw, 799px\" \/><\/a><figcaption id=\"caption-attachment-2786\" class=\"wp-caption-text\">Default HTML Table<\/figcaption><\/figure>\n<p>But wait! where is it our grid, the pagination?<\/p>\n<p>You&#8217;re right, we should call the plugin, so put between a <code>script<\/code> tags in the <code>head<\/code> section the following:<\/p>\n<pre class=\"brush: jscript; title: ; notranslate\" title=\"\">\r\n$(document).ready(function() {\r\n   $('#MyDT').DataTable();\r\n});\r\n<\/pre>\n<p>DataTables has most features enabled by default, so all you need to do to use it with your own tables is to call the construction function.<\/p>\n<p>Searching, ordering, paging etc goodness will be immediately added to the table, as shown in this example.<\/p>\n<p>Voila:<\/p>\n<figure id=\"attachment_2792\" aria-describedby=\"caption-attachment-2792\" style=\"width: 799px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/03\/DataTables-example.png\"><img decoding=\"async\" class=\"size-full wp-image-2792\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/03\/DataTables-example.png\" alt=\"Datatables Zero configuration\" width=\"799\" height=\"484\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/03\/DataTables-example.png 799w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/03\/DataTables-example-300x182.png 300w\" sizes=\"(max-width: 799px) 100vw, 799px\" \/><\/a><figcaption id=\"caption-attachment-2792\" class=\"wp-caption-text\">Datatables Zero configuration<\/figcaption><\/figure>\n<p>So, what&#8217;s happen when we apply the magic <code>DataTable()<\/code> function:<\/p>\n<ol>\n<li>The table toke default cool style from the plugin.<\/li>\n<li>The rows are distributed to many pages and a paging navigation appear at the bottom right of the table.<\/li>\n<li>At the top\u00a0left and bottom left, we have information about entries total records.<\/li>\n<li>And at the top right we have a search box that filter all columns in the client side.<\/li>\n<li>All columns are sortable.<\/li>\n<\/ol>\n<h3>Javascript sourced data Example<\/h3>\n<p>jQuery DataTable have many ways for data sources, via HTML, Ajax, Javascript and Server-side processing.<\/p>\n<p>To initiate the DataTable from Javascript variable, we need to create an array of data and then passed to the DataTable like the following:<\/p>\n<pre class=\"brush: jscript; highlight: [8]; title: ; notranslate\" title=\"\">\r\nvar dataSet = &#x5B;\r\n    &#x5B;'Trident','Internet Explorer 4.0','Win 95+','4','X'],\r\n    &#x5B;'Trident','Internet Explorer 5.0','Win 95+','5','C'],\r\n    ...\r\n    ];\r\n$(document).ready(function() {\r\n\t$('#MyDT').DataTable( {\r\n\t\t&quot;data&quot;: dataSet,\r\n\t\t&quot;columns&quot;: &#x5B;\r\n\t\t\t{ &quot;title&quot;: &quot;Engine&quot; },\r\n\t\t\t{ &quot;title&quot;: &quot;Browser&quot; },\r\n\t\t\t{ &quot;title&quot;: &quot;Platform&quot; },\r\n\t\t\t{ &quot;title&quot;: &quot;Version&quot;, &quot;class&quot;: &quot;center&quot; },\r\n\t\t\t{ &quot;title&quot;: &quot;Grade&quot;, &quot;class&quot;: &quot;center&quot; }\r\n\t\t]\r\n\t});\r\n});\r\n<\/pre>\n<p>A <code>&lt;table&gt;<\/code> must be available on the page for DataTables to use.<\/p>\n<p>So in your HTML put:<\/p>\n<pre class=\"brush: xml; title: ; notranslate\" title=\"\">\r\n&lt;table id=&quot;MyDT&quot; class=&quot;display&quot; cellspacing=&quot;0&quot; width=&quot;100%&quot;&gt;&lt;\/table&gt;\r\n<\/pre>\n<p>You can see in this example that no records are putted into table in the HTML file, the data are set in a variable <code>dataSet<\/code> and passed to the DataTable by the attribute <code>\"data\"<\/code>, this array should be contain same number of elements in each record. Also we&#8217;ve add the attribute <code>\"columns\"<\/code> that take an array of objects for <code>length<\/code> equal to the length of elements in record, each object inside this array have a <code>\"title\"<\/code> key that appear on top of each column in the table.<\/p>\n<h3>Conclusion<\/h3>\n<p>These are 2 simple examples about using jQuery DataTable, however there are many plugins that does the same job but in different way. If you need to create an enterprise web application or maybe a simple web application and you need to manage your data simplicitly, I recommend you to use <a title=\"DataTables Table plug-in for jQuery\" href=\"http:\/\/datatables.net\/\" target=\"_blank\">jQuery DataTable<\/a> because it have hundreds examples in the official website and over the internet, it&#8217;s very well supported and it have many useful extensions for advanced needs.<\/p>\n<h3>Download the source code for jQuery DataTable<\/h3>\n<p>This was an example of jQuery Data Grid control.<\/p>\n<div class=\"download\"><strong>Download<\/strong><br \/>\nYou can download the full source code of this example here : <a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2015\/03\/jQuery_Data_Grid_Contol_Example.zip\"><strong>jQuery_Data_Grid_Contol_Example<\/strong><\/a><\/div>\n","protected":false},"excerpt":{"rendered":"<p>In this example we will learn how to integrate a data grid plugin into a web application to display and manage many records of data instead of using the simple table element without manipulation. Most of these plugins provide a very flexible API to easily add\/edit\/remove records, paginate, sort and filter data based on predefined &hellip;<\/p>\n","protected":false},"author":58,"featured_media":919,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[23],"tags":[],"class_list":["post-2680","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>jQuery Data Grid Control Example - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"In this example we will learn how to integrate a data grid plugin into a web application to display and manage many records of data instead of using the\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-data-grid-control-example\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"jQuery Data Grid Control Example - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"In this example we will learn how to integrate a data grid plugin into a web application to display and manage many records of data instead of using the\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-data-grid-control-example\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:published_time\" content=\"2015-03-30T09:15:51+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2017-12-21T15:21:28+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Rami Tayba\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Rami Tayba\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-data-grid-control-example\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-data-grid-control-example\/\"},\"author\":{\"name\":\"Rami Tayba\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/0e396cc2123832350fac098b7d861d29\"},\"headline\":\"jQuery Data Grid Control Example\",\"datePublished\":\"2015-03-30T09:15:51+00:00\",\"dateModified\":\"2017-12-21T15:21:28+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-data-grid-control-example\/\"},\"wordCount\":852,\"commentCount\":3,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-data-grid-control-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\",\"articleSection\":[\"jQuery\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-data-grid-control-example\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-data-grid-control-example\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-data-grid-control-example\/\",\"name\":\"jQuery Data Grid Control Example - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-data-grid-control-example\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-data-grid-control-example\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\",\"datePublished\":\"2015-03-30T09:15:51+00:00\",\"dateModified\":\"2017-12-21T15:21:28+00:00\",\"description\":\"In this example we will learn how to integrate a data grid plugin into a web application to display and manage many records of data instead of using the\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-data-grid-control-example\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-data-grid-control-example\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-data-grid-control-example\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-data-grid-control-example\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"jQuery\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/jquery\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"jQuery Data Grid Control Example\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/0e396cc2123832350fac098b7d861d29\",\"name\":\"Rami Tayba\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/3a79461c791099d87bb3b8bc979f3a9e844f9f950d1a70efb24d5a8af4490ce1?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/3a79461c791099d87bb3b8bc979f3a9e844f9f950d1a70efb24d5a8af4490ce1?s=96&d=mm&r=g\",\"caption\":\"Rami Tayba\"},\"description\":\"Rami Tayba is a Software Engineer graduated from Lebanese University, he is experienced in web development and IT project management. During his experience, he was leading various teams and has been involved into many large projects from analysis and design to implementation.\",\"sameAs\":[\"http:\/\/ramitayba.tk\/\",\"http:\/\/www.linkedin.com\/pub\/rami-tayba\/34\/231\/415\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/rami-tayba\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"jQuery Data Grid Control Example - Web Code Geeks - 2026","description":"In this example we will learn how to integrate a data grid plugin into a web application to display and manage many records of data instead of using the","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:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-data-grid-control-example\/","og_locale":"en_US","og_type":"article","og_title":"jQuery Data Grid Control Example - Web Code Geeks - 2026","og_description":"In this example we will learn how to integrate a data grid plugin into a web application to display and manage many records of data instead of using the","og_url":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-data-grid-control-example\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_published_time":"2015-03-30T09:15:51+00:00","article_modified_time":"2017-12-21T15:21:28+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","type":"image\/jpeg"}],"author":"Rami Tayba","twitter_card":"summary_large_image","twitter_creator":"@webcodegeeks","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Rami Tayba","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-data-grid-control-example\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-data-grid-control-example\/"},"author":{"name":"Rami Tayba","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/0e396cc2123832350fac098b7d861d29"},"headline":"jQuery Data Grid Control Example","datePublished":"2015-03-30T09:15:51+00:00","dateModified":"2017-12-21T15:21:28+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-data-grid-control-example\/"},"wordCount":852,"commentCount":3,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-data-grid-control-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","articleSection":["jQuery"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-data-grid-control-example\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-data-grid-control-example\/","url":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-data-grid-control-example\/","name":"jQuery Data Grid Control Example - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-data-grid-control-example\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-data-grid-control-example\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","datePublished":"2015-03-30T09:15:51+00:00","dateModified":"2017-12-21T15:21:28+00:00","description":"In this example we will learn how to integrate a data grid plugin into a web application to display and manage many records of data instead of using the","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-data-grid-control-example\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-data-grid-control-example\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-data-grid-control-example\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/jquery-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/javascript\/jquery\/jquery-data-grid-control-example\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/"},{"@type":"ListItem","position":3,"name":"jQuery","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/jquery\/"},{"@type":"ListItem","position":4,"name":"jQuery Data Grid Control Example"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/0e396cc2123832350fac098b7d861d29","name":"Rami Tayba","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/3a79461c791099d87bb3b8bc979f3a9e844f9f950d1a70efb24d5a8af4490ce1?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3a79461c791099d87bb3b8bc979f3a9e844f9f950d1a70efb24d5a8af4490ce1?s=96&d=mm&r=g","caption":"Rami Tayba"},"description":"Rami Tayba is a Software Engineer graduated from Lebanese University, he is experienced in web development and IT project management. During his experience, he was leading various teams and has been involved into many large projects from analysis and design to implementation.","sameAs":["http:\/\/ramitayba.tk\/","http:\/\/www.linkedin.com\/pub\/rami-tayba\/34\/231\/415"],"url":"https:\/\/www.webcodegeeks.com\/author\/rami-tayba\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/2680","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/58"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=2680"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/2680\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/919"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=2680"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=2680"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=2680"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}