Jquery Datatable排序

我很喜欢Jquery DataTables。关于如何使用排序插件，我有一个非常基本的问题：在这方面已经搜索了很多，但我没有得到正确的答案，关于如何将它们合并到我的代码中，我们是否必须将脚本添加到“.js”文件并添加它？或者我们还必须调用插件的功能吗？Jquery Datatable排序

有人可以指点我的一个工作示例，用逗号/百分号格式化数字列的排序。

带符号或逗号的列按字符串排序。我看到很多引用说使用插件，然后指定sType或sSortableDataType但这不起作用。

这里是我的代码：（请纠正我在哪里，我错了）

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="scorecard_dynamic.aspx.cs" Inherits="Dashboard_scorecard_dynamic" %>

<!DOCTYPE html> 

<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title>new score card</title> 
    <%--<script src="../js/jquery-1.10.2.min.js"></script>--%> 

    <style type="text/css" title="currentStyle"> 
     @import "../js/datatable/css/demo_page.css"; 
     @import "../js/datatable/css/demo_table.css"; 
    </style> 
    <script type="text/javascript" src="../js/datatable/js/jquery.js"></script> 
    <script type="text/javascript" src="../js/datatable/js/jquery.dataTables.js"></script> 

    <script src="../js/datatable/Plugins-master/sorting/custom-data-source/percent.js"></script> 

    <link href="../StyleSheet/LoadingPanel.css" rel="stylesheet" /> 

    <script type="text/javascript" charset="utf-8"> 

     $(document).ready(function() { 


      gettopchannelsplot(); 
      //transpose();   
      var otable = $('#example').dataTable({ 
       "iDisplayLength": 5, 

       "aLengthMenu": [[1, 2, 3, 4, 5], [1, 2, 3, 4, "All"]], 
       "oLanguage": { 
        "oPaginate": { 
         "sPrevious": "Previous", //can change text for pagination 
         "sNext": "Next" 
        }, 
        //"fnDrawCallback": function (oSettings) { 
        // alert('DataTables has redrawn the table'); 
        //}, 
        "aoColumns": [ 
          null,      
          { "sType": "pct" }, 
          null, 
          null, 
          null, 
          null, 
          null, 
          null 
        ], 
        "aoColumnDefs": [ 
          { "bSortable": false, "aTargets": [ 0,5,6,7 ] }      
        ] 
       } 
       //"sPaginationType": "full_numbers" 
      }); 
      oTable.fnSort([[3, 'asc']]); 
     }); 
     var StartDate = '16-oct-2013'; 
     var EndDate = '22-oct-2013'; 
     function transpose() { 
      var t = $('#example tbody').eq(0); 
      var r = t.find('tr'); 
      var cols = r.length; 
      var rows = r.eq(0).find('td').length; 
      var cell, next, tem, i = 0; 
      var tb = $('<tbody></tbody>'); 

      while (i < rows) { 
       cell = 0; 
       tem = $('<tr></tr>'); 
       while (cell < cols) { 
        next = r.eq(cell++).find('td').eq(0); 
        tem.append(next); 
       } 
       tb.append(tem); 
       ++i; 
      } 
      $('#example').append(tb); 
      $('#example').show(); 
     } 
     function gettopchannelsplot() { 
      //$("#bubbling").show(); 
      //alert('gettopchannelsplot'); 
      var arrListMain = new Array(); 
      var arrList = new Array(); 
      var linkName = 'View Chatter'; 

      var result = ExecuteSynchronously('../SocialMedia.asmx', 'GetTopchannels', { startDate: StartDate, endDate: EndDate }); 


      //tbl_example.empty(); 
      $('#example thead').append("<tr>" 
       +"<td class='normalBold' align='left'>info</td>" 
       + "<td class='normalBold' align='left'>share of voice</td>" 
       + "<td class='normalBold' align='left'>total chatter</td>" 
       + "<td class='normalBold' align='left'>sentiments</td>" 
       + "<td class='normalBold' align='left'>exposure</td>" 
       + "<td class='normalBold' align='left'>most popular with</td>" 
       + "<td class='normalBold' align='left'>most popular on</td>" 
       + "<td class='normalBold' align='left'>link</td>" 
       + "</tr>"); 

      var value = new Array(); 
      if (result.d != "" && result.d != null) { 
       arrListMain = result.d.split('#'); 

       for (var i = 0; i < arrListMain.length; i++) { 
        var tmp = "<tr>" 
        + "<td class='border' width='12%'><a href='../Scorecard.aspx?1'><image src='" + "../" + arrListMain[i].split('^')[7] + "'/></a></td>" 
        + " <td class='border' width='12%' align='center'>" + arrListMain[i].split('^')[2] + "%</td>" 
        + " <td class='border' width='12%' align='center'> " + arrListMain[i].split('^')[3] + "</td>" 
////    + " <td class='border' width='12%' align='center'><label id=label" + i + " >" + Number(arrListMain[i].split('^')[3]).toLocaleString() + "</label></td>" 
        + " <td class='border' width='12%' align='center'><image src='" + "../" + arrListMain[i].split('^')[10] + "'/></td>" 
        + " <td class='border' width='13%' align='center'>" + arrListMain[i].split('^')[5] + "</td>" 
        + " <td class='border' width='13%' align='center'><image src='" + "../" + arrListMain[i].split('^')[8] + "'/></td>" 
        + " <td class='border' width='13%' align='center'><image src='" + "../" + arrListMain[i].split('^')[9] + "'/></td>" 
        + " <td class='border' width='13%' align='center'><a href='../ChatterAdvanced2.aspx?filter=channel&value=" + arrListMain[i].split('^')[0] + "'>chatter</a></td>" 
        + "</tr>"; 
        //alert(tmp); 
        $('#example tbody').append(tmp); 
       } 

      } 
      $("#bubbling").hide(); 
     } 

    </script> 
    <script type="text/javascript"> 

     function ExecuteSynchronously(url, method, args) { 
      var executor = new Sys.Net.XMLHttpSyncExecutor(); // Instantiate a WebRequest. 
      var request = new Sys.Net.WebRequest(); // Set the request URL. 
      request.set_url(url + '/' + method); // Set the request verb. 
      request.set_httpVerb('POST'); // Set request header. 
      request.get_headers()['Content-Type'] = 'application/json; charset=utf-8'; // Set the executor. 
      request.set_executor(executor); // Serialize argumente into a JSON string. 
      request.set_body(Sys.Serialization.JavaScriptSerializer.serialize(args)); // Execute the request. 
      request.invoke(); 
      if (executor.get_responseAvailable()) { 
       return (executor.get_object()); 
      } 
      return (false); 
     } 
    </script> 

</head> 
<body> 
    <form id="form1" runat="server"> 
     <AjaxToolkit:ToolkitScriptManager runat="server" ID="ASD"> 
      <Scripts> 
       <asp:ScriptReference Path="~/js/XMLHttpSyncExecutor.js" ScriptMode="Release" /> 
       <asp:ScriptReference Path="~/App_Code/SocialMedia.cs" /> 
      </Scripts> 
     </AjaxToolkit:ToolkitScriptManager> 
     <div> 

      <div class="bubblingG" id="bubbling"> 
       <span id="bubblingG_1"></span> 
       <span id="bubblingG_2"></span> 
       <span id="bubblingG_3"></span> 
      </div> 
      <table cellpadding="0" cellspacing="0" border="0" class="display" id="example"> 
       <thead>      
       </thead> 
       <tbody> 
       </tbody>     
      </table> 
     </div> 
    </form> 
</body> 
</html>

请原谅我的HTML标记格式。

来源

2013-12-10 Pavitar

您需要“插件”和根据该插件设置正确的sType。插件实际上只是一些非常简单的功能，您可以根据自己的需要轻松生成自己的代码并放入代码中。考虑用逗号分类百分比的这个“插件”：

jQuery.extend(jQuery.fn.dataTableExt.oSort, { 
    "normalize": function(n) { 
     return parseFloat(n.toString().replace(',','.')); 
    }, 
    "percent-asc": function(a, b) { 
     a=this.normalize(a); 
     b=this.normalize(b); 
     return ((a < b) ? -1 : ((a > b) ? 1 : 0)); 
    }, 
    "percent-desc": function(a, b) { 
     a=this.normalize(a); 
     b=this.normalize(b); 
     return ((a < b) ? 1 : ((a > b) ? -1 : 0)); 
    } 
});

上面是很不安全的。要初始化：

var dataTable = $('#example').dataTable({ 
    aoColumns: [ 
     null, 
     null, 
     null, 
     { sType: "percent" }, 
     null 
    ], 
    //... 
});

看到这方面的工作小提琴证明上面的代码 - >http://jsfiddle.net/xK7Ud/

来源

2013-12-10 13:46:30 davidkonrad

完美！我发现我的愚蠢的错误，这是一个语法错误，我有一个额外的关闭花括号...感谢:) – Pavitar

Jquery Datatable排序

回答

相关问题