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

初始化datable的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文件？如果是这样，那可能是错误的原因。

之前在datatables论坛上出现了类似的问题： http://www.datatables.net/forums/discussion/9661/.fn.datatableext-is-undefined/p1

另外，我试图从你的代码示例中创建一个小提琴，并没有发现任何问题。

http://jsfiddle.net/r4FBQ/

如果你查看小提琴的HTML的框架源，你应该看看插件代码是如何在dataTables 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>

Jquery，插件未被识别/调用

1 个答案: