title: Need help writing clean organized javascript code
body: <p>I am a newb with javascript and JQuery, so I am having a lot of trouble writing clean, organized code. The code below just feels sloppy and I know it is. Here is a sample of what my code looks like. If anyone has suggestions or comments about how to improve it via functions, objects, classes, that would be awesome.</p>
  
  <p>The code below uses a datatable plugin, and generally would contain all the code for my page. There are still many more event handlers to write and such, but I would like to first get a handle on what I have already written before I get in too deep.</p>
  
  <pre><code>var plannerTable;
  
  
  $(function () {
  
      // Initialize datatable object
      plannerTable = $('#plannerTable').dataTable
      ({
          "bJQueryUI": true,
          "bFilter": true,
          "sPaginationType": "full_numbers",
          "oLanguage":
              {
                  "sZeroRecords": "Add some tasks to your planner"
              },
          "aoColumns":
              [
                  { "bSortable": true, "bSearchable": false }, // task id
                  {"bSortable": true, "bSearchable": false }, // course
                  {"bSortable": false, "bSearchable": false }, // Edit 
                  {"iDataSort": 2 }, // due date
                  null,  // task
                  {"bSortable": false, "bSearchable": false }, // Options     
                  {"bSortable": false, "bSearchable": false} // Delete    
              ]
      });
  
  
      /* Insert Time Filter Controls into datatable */
      var filterHtml =  [
          '&lt;ul id="plannerTable_TimeFilter" class="dataTables_TimeFilter"&gt;',
          '&lt;li&gt;&lt;a href="#"&gt;Day&lt;/a&gt;&lt;/li&gt;',
          '&lt;li&gt;&lt;a href="#"&gt;Week&lt;/a&gt;&lt;/li&gt;',
          '&lt;li&gt;&lt;a href="#"&gt;Month&lt;/a&gt;&lt;/li&gt;',
          '&lt;li&gt;&lt;a href="#"&gt;All&lt;/a&gt;&lt;/li&gt;',
          '&lt;li&gt;&lt;a href="#"&gt;Last 30 Days&lt;/a&gt;&lt;/li&gt;',
          '&lt;/ul&gt;'
      ]
  
      $('#plannerTable_filter').after(filterHtml.join(''));
  
  
  
      var dateFilters = $('#plannerTable_TimeFilter li');
  
      /* setup filter click event */
      dateFilters.click(function () 
      {
          var dateFilter = $(this).text().replace(/\s+/g, '');
  
          /* Get tasks by date range */
          $.getJSON('/Planner/Planner/GetTasksByDateRange', { 'dateFilter': dateFilter }, function (data) 
          {
              plannerTable.fnClearTable();
  
              $.each(data, function (key, value) 
              {
                  var row = createTableRow(value);
  
                  /* add row to table */
                  plannerTable.fnAddTr($(row)[0], true);
              });
          });
      });
  
  
      /*
      * Function: createTableRow
      * Purpose:  Creates an HTML Row using the html in this function
      * Returns:  constructed html row
      * Inputs:   row data object
      */
      function createTableRow(value) 
      {
  
          var date = new Date(parseInt(value.DueDate.substr(6)));
  
          /* convert date to proper format */
          /* construct html row */
          var row = [
              '&lt;tr&gt;',
                  '&lt;td style="display: none;"&gt;' + value.TaskId + '&lt;/td&gt;',
                  '&lt;td class="tag-bg" style="width: 10px;"&gt;',
                      '&lt;span class="tag" style="background-color:' + value.CourseBackgroundColor + '" title="' + value.CoursePrefix + '"&gt;&amp;nbsp;' + '&lt;/span&gt;',
                      '&lt;span style="display: none;"&gt;' + value.CoursePrefix + '&lt;/span&gt;',
                  '&lt;/td&gt;',
                  '&lt;td class="edit"&gt;',
                      '&lt;a href="#"&gt;&lt;img src="../../../../Content/Images/Planner/edit-icon.png" /&gt;&lt;/a&gt;',
                  '&lt;/td&gt;',
                  '&lt;td class="due-date"&gt;' + value.DueDate + '&lt;/td&gt;',
                  '&lt;td class="task-col"&gt;' + value.TaskName + '&lt;/td&gt;',
                  '&lt;td class="options"&gt;',
                      '&lt;a class="desc" href="#"&gt;&lt;img src="../../../../Content/Images/Planner/desc-off-icon.png" /&gt;&lt;/a&gt;',
                      '&lt;a class="alert" href="#"&gt;&lt;img src="../../../../Content/Images/Planner/bell-off-icon.png" /&gt;&lt;/a&gt;',
                  '&lt;/td&gt;',
                  '&lt;td class="delete"&gt;',
                      '&lt;a href="#"&gt;&lt;img src="../../../../Content/Images/Planner/delete-icon.png" /&gt;&lt;/a&gt;',
                  '&lt;/td&gt;',
              '&lt;/tr&gt;'
           ]
  
          return row.join('');
      }
  });
  </code></pre>