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>