在jQuery的數據表插件排序不工作

我的HTML代碼：在jQuery的數據表插件排序不工作

<table id="sample"> 
<thead> 
     <tr> 
      <th> 
      </th> 

      <th style="text-align:center"> 
       Date 
      </th> 

      <th style="text-align:center"> 
       Type 
      </th> 

      <th style="text-align:center"> 
       Narration 
      </th> 

      <th> 
        Person 1 Salary 
        <div> 
        </div> 
      </th> 
      <th> 
       <div> 
        Person 2 Salary 
       </div> 
      </th> 

      <th> 
       <div> 
        Person 3 Salary 
       </div> 
      </th> 

      <th class="bold text-center"> 
       Total Amount 
      </th> 
     </tr> 
</thead> 

<tbody> 
    <tr> 
     <td> 
      <button style="height:25px;width:80px" class="btn btn-primary"> 
       Delete 
      </button> 
     </td> 

     <td> 
      <input class="form-control" type="text"> 
     </td> 
     <td> 
      <div> 
       <select class="form-control"> 
        <option selected="selected" value="ddadd"></option> 
        <option value="asdasd">adasa</option> 
        <option value="sas">adass</option> 
       </select> 
      </div> 
     </td> 

     <td> 
      <input class="form-control"> 
     </td> 

     <td> 
      <div> 
       <input class="form-control"> 
      </div> 
      <input type="hidden" value="325"> 
      <input type="hidden" value="46408"> 
      <input type="hidden" value="22615"> 
     </td> 
     <td> 
      <div> 
       <input class="form-control"type="text" value="0"> 
      </div> 
      <input type="hidden" value="326"> 
      <input type="hidden" value="46409"> 
      <input type="hidden" value="22615"> 
     </td> 
     <td> 
      <div> 
       <input class="form-control"type="text" value="7500"> 
      </div> 
      <inputtype="hidden" value="327"> 
      <inputtype="hidden" value="46410"> 
      <inputtype="hidden" value="22615"> 
     </td> 
     <inputtype="hidden" value="2920bb4d-101d-46d5-89a2-8aaaebfd124c"> 
     <inputtype="hidden" value="22615"> 
     <inputtype="hidden" value="True"> 

     <td> 
      <div> 
       <input id="txtTotalAmount"type="text" value="7500"> 
      </div> 
     </td> 
    </tr> 
</tbody> 
<tfoot> 
    <tr> 
     <td></td> 

     <td style="text-align: left"> 
      <label class="control-label">Total</label> 
     </td> 
     <td></td> 
     <td></td> 
     <td style="text-align: right; padding: 3px 0px;"> 
      <div style="width:84%"> 
       <label class="control-label"> 
        0 
       </label> 
      </div> 
     </td> 
     <td style="text-align: right; padding: 3px 0px;"> 
      <div style="width:84%"> 
       <label class="control-label"> 
        0 
       </label> 
      </div> 
     </td> 
     <td style="text-align: right; padding: 3px 0px;"> 
      <div style="width:84%"> 
       <label class="control-label"> 
        0 
       </label> 
      </div> 
     </td> 
     <td style="text-align: right; padding: 3px 0px;"> 
      <div style="width:84%"> 
       <label class="control-label"> 
        0 
       </label> 
      </div> 
     </td> 
    </tr> 
</tfoot>

我的JS代碼：

//Extending the method in order to sort the columns having text box field 

$.fn.dataTableExt.afnSortData['dom-text'] = function (oSettings, iColumn) { 
var aData = []; 
$('td:eq(' + iColumn + ') input', oSettings.oApi._fnGetTrNodes(oSettings)).each(function() { 
aData.push(this.value); 
}); 
return aData; 
} 

// Loading my table as DataTable with only one column as sortable 
$('#sample').DataTable({ 
"paging": false, 
"searching": false, 
"order": [[1, "desc"]], 
'columns': [ 
       null, 
       { 'sSortDataType': 'dom-text', 'sType': 'date' }, 
       null, 
       null, 
       null, 
       null, 
       null 
      ] 
});           });

我試了一下：

我試圖對其中有文本字段的「日期」列進行排序。

錯誤我得到：

無法讀取的不確定

財產 'MDATA' 我需要什麼：

我需要日期將輸入文本字段作爲行進行排序的列。

請幫我擺脫這個。我找不到我犯了錯誤的地方。

來源

2016-05-05 Vikash

請試試這個JS代碼

$.fn.dataTableExt.afnSortData['dom-text'] = function (oSettings, iColumn) { 
    var aData = []; 
    $('td:eq(' + iColumn + ') input', oSettings.oApi._fnGetTrNodes(oSettings)).each(function() { 
    aData.push(this.value); 
}); 
    return aData; 
} 


$.fn.dataTable.moment = function (format, locale) { 
    var types = $.fn.dataTable.ext.type; 

    // Add type detection 
    types.detect.unshift(function (d) { 
    return moment(d, format, locale, true).isValid() ? 
    'moment-'+format : 
    null; 
    }); 

    // Add sorting method - use an integer for the sorting 
    types.order[ 'moment-'+format+'-pre' ] = function (d) { 
    return moment(d, format, locale, true).unix(); 
    }; 
}; 

$.fn.dataTable.moment('DD-MMM-YYYY') 

$('#sample').DataTable({ 
    "paging": false, 
    "searching": false, 
    "order": [[1, "desc"]], 
    "columnDefs": [ {"targets": [0], "type": "moment-DD-MMM-YYYY"}], 
    'columns': [ 
      null, 
      { 'sSortDataType': 'dom-text', 'sType': 'date' }, 
      null, 
      null, 
      null, 
      null, 
      null 
     ] 
});

此功能將整理您的日期格式即（「DD-MMM-YYYY」）請嘗試了這一點。您也可以嘗試下面的鏈接 -

來源

2016-05-05 11:35:45

謝謝哥們。我找到了解決方案。我發佈它作爲答案。 – Vikash

在jQuery的數據表插件排序不工作

回答

相關問題