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ファイルの前にプラグインを追加していますか？もしそうなら、それがエラーの原因である可能性があります。

同様の問題が以前にdatatablesフォーラムで発生しました： http ：//www.datatables.net/forums/discussion/9661/.fn.datatableext-is-undefined/p1

また、コードサンプルからフィドルを作成しようとしましたが、問題は見つかりませんでした。

http://jsfiddle.net/r4FBQ/

フィドルのHTMLのフレームソースを表示すると、プラグインコードがdataTablesjsファイルの後にどのように表示されるかがわかります。

<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 に答える