CODEWITHSUNDEEP
javascriptjqueryjquery-uijquery-pluginsdatatables
Harbir
Harbir

Reputation: 453

Jquery, plugin is not identified/called

I am trying to write my custom plugin(and figure our how they work), for sorting the datable. The issue is that the plugin is not getting identified/called, when I set sType in the data-table initialization.

I am just making the first column as sortable.

The following is the code:

The plugin file

/**
 * Custom sort file name jquery.ui.customsort.js
 */

(function($) {
  jQuery.fn.dataTableExt.oSort['string-case-asc']  = function(x,y) {
     return ((x < y) ? -1 : ((x > y) ?  1 : 0));
  };
  jQuery.fn.dataTableExt.oSort['string-case-desc'] = function(x,y) {
      return ((x < y) ?  1 : ((x > y) ? -1 : 0));
  };
})(jQuery);

The java script that initializes the datable is:

/**
 * Initialization the data table
 */

  var oSortTable=null;
  $(function() {

/*Creating the html for the table with id 'sort_table'*/
var sorttablehtml = "<table id='sort_table'><thead><tr><th>FirstName</th>  <th>FamilyName</th></tr></thead><tbody>";
sorttablehtml +='<tr class="contactnamedetail"><td>New York</td><td>United States</td></tr>';
sorttablehtml +='<tr class="contactnamedetail"><td>Paris</td><td>Paris</td></tr>';
sorttablehtml +='<tr class="contactnamedetail"><td>Sydney</td><td>Australia</td></tr>';
sorttablehtml +='<tr class="contactnamedetail"><td>Berlin</td><td>Germany</td></tr>';
sorttablehtml +="</tbody></table>"; 


$('#sortingtable').html(sorttablehtml);
/*converting the table to datatable*/
oSortTable=$('#sort_table').dataTable({
      "aoColumns": [ 
                    { "sType": "string-case"},
                    { "bSortable": false }//Disable sorting on this column

                    ]
  });
});

I am missing out on something which I am not able to figure out. Any help in this regard will be much appreciated.

Errors in the console are:

 Timestamp: 3/7/2013 12:52:11 PM
 Error: TypeError: jQuery.fn.dataTableExt is undefined
 Source File: http://myorg:8080/jqueryproject/javascript/jquery/development-bundle/ui/jquery.ui.customsort.js
 Line: 6

 Timestamp: 3/7/2013 12:55:33 PM
 Error: TypeError: oCol is undefined
 Source File: http://myorg:8080/jqueryproject/javascript/datatables/media/js/jquery.dataTables.js
 Line: 784

Order of the files getting is:

<!-- Jquery files used for various plugins and widgets -->
<link type="text/css" href="/jqueryproject/javascript/jquery/development-bundle/themes /base/jquery.ui.all.css" rel="Stylesheet" />
<link type="text/css" href="/jqueryproject/javascript/jquery/development-bundle/demos /demos.css" rel="Stylesheet" />

<script type="text/javascript"  src="/jqueryproject/javascript/jquery/js/jquery- 1.7.2.min.js"></script>
<script type="text/javascript"  src="/jqueryproject/javascript/jquery/development- bundle/ui/jquery.ui.core.js"></script>
<script type="text/javascript"  src="/jqueryproject/javascript/jquery/development- bundle/ui/jquery.ui.widget.js"></script>
<script type="text/javascript"  src="/jqueryproject/javascript/jquery/development-bundle/ui/jquery.ui.datepicker.js"></script>
<script type="text/javascript"  src="/jqueryproject/javascript/jquery/development-bundle/ui/jquery.ui.tabs.js"></script>
<script type="text/javascript"  src="/jqueryproject/javascript/jquery/development-bundle/ui/jquery.effects.core.js"></script>
<script type="text/javascript"  src="/jqueryproject/javascript/jquery/development-bundle/ui/jquery.effects.fade.js"></script>

<script type="text/javascript"  src="/jqueryproject/javascript/datatables/media/js/jquery.js"></script>
<script type="text/javascript"  src="/jqueryproject/javascript/datatables/media/js/jquery.dataTables.js"></script>
<script type="text/javascript"  src="/jqueryproject/javascript/datatables/media/js/jquery.jeditable.js"></script>
<script type="text/javascript"  src="/jqueryproject/javascript/datatables/media/js/jquery.validate.js"></script>
<script type="text/javascript"  src="/jqueryproject/javascript/datatables/media/js/jquery.dataTables.editable.js"></script>


<link type="text/css" href="/jqueryproject/javascript/datatables/media/css/demo_page.css" rel="Stylesheet" />
<link type="text/css" href="/jqueryproject/javascript/datatables/media/css/demo_table_jui.css" rel="Stylesheet" />
<link type="text/css" href="/jqueryproject/javascript/datatables/media/css/demo_table.css" rel="Stylesheet" />
<link type="text/css" href="/jqueryproject/javascript/datatables/media/css/jquery.dataTables_themeroller.css" rel="Stylesheet" />
<link type="text/css" href="/jqueryproject/javascript/datatables/media/css/jquery.dataTables.css" rel="Stylesheet" />

<script type="text/javascript"  src="/jqueryproject/javascript/jquery/development-bundle/ui/jquery.ui.customsort.js"></script>
<script type="text/javascript"  src="/jqueryproject/javascript/jquery/development-bundle/ui/jquery.ui.fixedwidth.js"></script>
<script type="text/javascript"  src="/jqueryproject/javascript/custom/jqueryproject.js"></script>
<script type="text/javascript"  src="/jqueryproject/javascript/custom /sortingtable.js"></script>

Upvotes: 2

Views: 6326

Answers (1)

mg1075
mg1075

Reputation: 18155

In what order are you loading your external files?

Are you adding your plugin prior to the dataTables .js file? If so, that could be the cause of the error.

A similar issue has come up before on the datatables forum: http://www.datatables.net/forums/discussion/9661/.fn.datatableext-is-undefined/p1

Also, I have attempted to create a fiddle out of your code sample, and have not found any problems.

http://jsfiddle.net/r4FBQ/

If you view the frame source for the HTML of the fiddle, you should see how the plugin code comes after the dataTables js file. 

<script type='text/javascript' src="http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js"></script>
<script type='text/javascript'>
 // your plugin code...
</script>

Upvotes: 3

Related Questions