2

我正在尝试编写我的自定义插件（并弄清楚它们是如何工作的），用于对数据进行排序。问题是当我在数据表初始化中设置 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>
4

1 回答 1

3

您以什么顺序加载外部文件？

您是否在 dataTables .js 文件之前添加插件？如果是这样，那可能是错误的原因。

之前在数据表论坛上也出现过类似的问题： 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>
于 2013-03-07T02:06:51.973 回答