title: getting jquery fields dynamically for jtable pagination
body: <p>I am using jquery for doing pagination in jsp with jtable plugin </p>
  
  <p>the following code is written in a jsp, here all the fields to be displayed in pagination are hard-coded this is working fine for getting and displaying data from a table in database which is having same columns but if i try to get data from another table where columns may differ in numbers or types it wont display the content, so i was trying to give these field name according to columns from the selected query.. I will get all the column names to this jsp as a list </p>
  
  <pre><code>like list=[Id,name,salary,Doj,Dob,Ctc];
  </code></pre>
  
  <p>this list may vary from table to table, so i want to give these values in the list as fields in the following code dynamically,like using something like iterator,i am completely new to jquery.
                 Excepting some suggestions to get field values dynamically from a list</p>
  
  <p>this is code of jsp which uses ajax calls to retrieve data from database</p>
  
  <pre><code>    &lt;!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"&gt;
      &lt;html&gt;
      &lt;head&gt;
      &lt;meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"&gt;
      &lt;!-- Include one of jTable styles. --&gt;
      &lt;link href="css/metro/crimson/jtable.css" rel="stylesheet"
          type="text/css" /&gt;
      &lt;link href="css/jquery-ui-1.10.3.custom.css" rel="stylesheet"
          type="text/css" /&gt;
      &lt;!-- Include jTable script file. --&gt;
      &lt;script src="js/jquery-1.8.2.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="js/jquery-ui-1.10.3.custom.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script src="js/jquery.jtable.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
      function TxtValue()
      {
          var Selectedval = document.getElementById("data");
          document.getElementById("name").value = Selectedval.value;
  
  
          }
  /************** jquery fields are hardcoded here*******************************/
  
  
      $(document).ready(function() {
                  $('#PersonTableContainer').jtable({
                      title : 'Table of people',
                      paging : true, //Enable paging
                      pageSize : 10, //Set page size (default: 10)           
                      actions : {
                          listAction : 'CRUD?action=list',
                          createAction : 'CRUD?action=create',
                          updateAction : 'CRUD?action=update',
                          deleteAction : 'CRUD?action=delete'
  
                      },
                      fields : {
                          EMPLOYEE_CODE  : {
                              title : 'EMPLOYEE_CODE ',
                              key : true,
                              list : true,
                              create : true,
                              edit : false
  
                          },
  
                          NAME  : {
                              title : 'NAME',
                              width : '30%',
                              edit : true
                          },
                          CC : {
                              title : 'CC',
                              width : '30%',
                              edit : true
                          },
                          LOADED_COST_PA  : {
                              title : 'LOADED_COST_PA ',
                              width : '20%',
                              edit : true
                          },
                          LOADED_COST_PM  : {
                              title : 'LOADED_COST_PM ',
                              width : '30%',
                              edit : true
                          },
                          DOJ  : {
                              title : 'DOJ ',
                              width : '30%',
                              edit : true
                          },LOB   : {
                              title : 'LOB  ',
                              width : '30%',
                              edit : true
                          },LOADED_COST_PA  : {
                              title : 'LOADED_COST_PA ',
                              width : '30%',
                              edit : true
                          },ONSITE_MANAGER  : {
                              title : 'ONSITE_MANAGER ',
                              width : '30%',
                              edit : true
                          }
  
  
              }
          });
               //Re-load records when user click 'load records' button.
              $('#LoadRecordsButton').click(function (e) {
                  e.preventDefault();
                  $('#PersonTableContainer').jtable('load', {
                      name: $('#name').val(),
                      id: $('#id').val()
                  });
              });
  
              //Load all records when page is first shown
              $('#LoadRecordsButton').click();
          //  $('#PersonTableContainer').jtable('load');
  
          /***********************************************/
  
  
          $('#id').change(function(event) {
                  var columnName = $("select#id").val();
                  $.get('CRUD?action=columnFilter', {
                          columnName : columnName
                  }, function(response) {
  
                  var select = $('#data');
                  select.find('option').remove();
                    $.each(response, function(index, value) {
                    $('&lt;option&gt;').val(value).text(value).appendTo(select);
                });
                  });
                  });
  
  
  
              /*******************************************/
  
          });
  
          &lt;/script&gt;
          &lt;/head&gt;
          &lt;body&gt;
          &lt;%!  
          public String tablename = "";  
          %&gt;
  
          &lt;%
             HttpSession sec = request.getSession();
            List columnsList=(List)sec.getAttribute("columnsList");
  
          %&gt;
          &lt;c:import url="manage_data.jsp" /&gt;
          &lt;br/&gt;
          &lt;div class="filtering"
              style="width: 60%; margin-right: 20%; margin-left: 20%; text-align: center;"&gt;
              &lt;form&gt;
                  Search By: &lt;select id="id" name="table"&gt;
                      &lt;option selected="selected" value="default"&gt;Complete Data&lt;/option&gt;
                                  
                      &lt;c:forEach var="str" items="${columnsList}"&gt;
                          &lt;option&gt;${str}&lt;/option&gt;
                          &lt;br&gt;
                      &lt;/c:forEach&gt;
  
                  &lt;/select&gt;
                   Select Data:
                  &lt;select id="data" onclick ="TxtValue()"   &gt;
                      &lt;option  selected="selected"&gt;--NONE--&lt;/option&gt;
  
  
                          &lt;option&gt;&lt;/option&gt;                
                  &lt;/select&gt;
  
  
                   Enter Value: &lt;input type="text" name="name" id="name" /&gt;
  
                  &lt;button type="submit" id="LoadRecordsButton"&gt;Load records&lt;/button&gt;
              &lt;/form&gt;
  
              &lt;div id="PersonTableContainer"&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;/body&gt;
          &lt;/html&gt;
  </code></pre>