1. 홈
  2. 질의 응답
  3. Jquery Datatable 정렬

Jquery Datatable 정렬

2013-12-10 2 views
1

나는 Jquery DataTables와 함께 noob입니다. 정렬 플러그인을 사용하는 방법에 대한 매우 기본적인 질문이 있습니다. Google 검색을 많이 해봤지만 적절한 대답을 얻지 못했습니다. 코드에 코드를 통합하는 방법에 대한 답변을 얻지 못했습니다. 스크립트를 ".js"파일을 추가하고 추가 하시겠습니까? 또는 우리는 플러그인의 기능을 호출해야합니까?Jquery Datatable 정렬

쉼표/​​백분율 기호로 포맷 된 숫자 열 정렬을 사용하여 작업 예제로 나를 안내 할 수 있습니까?

부호 또는 쉼표가있는 열은 문자열로 정렬됩니다. 플러그인을 사용하는 많은 참조를 본 다음 유형 또는 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

답변

1

"플러그인"과이 모두 해당 플러그인에 따라 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

+0

완벽하게! 문법 오류 인 바보 같은 실수를 발견했습니다. 나는 꼬부라 진 대괄호가있었습니다. :) 감사합니다 :) – Pavitar

관련 문제

 관련 문제