jquery，插件未被識別/調用

Question

我正在嘗試編寫我的自定義插件（以及我們的工作方式），以便對數據集進行排序。 問題是，當我在數據表初始化中設置sType時，插件沒有被識別/調用。

我只是把第一列作爲排序。

以下是代碼：

插件文件

/** 
* 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); 

初始化的確定年代的Java腳本是：

/** 
* 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 

        ] 
    }); 
}); 

我錯過了一些東西，我不是能夠弄清楚。 在這方面的任何幫助將不勝感激。

錯誤控制檯是：

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 

在獲得這些文件的順序是：

<!-- 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> 

Answer 1

按照什麼順序加載你的外部文件？

您是否將您的插件之前的添加到dataTables .js文件？如果是這樣，那可能是錯誤的原因。

類似的問題又拿出了之前對數據表論壇： http://www.datatables.net/forums/discussion/9661/.fn.datatableext-is-undefined/p1

而且，我試圖創建一個小提琴了您的代碼示例， 的，並沒有發現任何問題。

http://jsfiddle.net/r4FBQ/

如果查看小提琴的HTML框架源代碼，你可以看到該插件代碼是如何而來的數據表js文件後。

<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>