jQuery dataTable排序定制

时间:2015-05-04 14:02:32

标签: jquery datatables

在.cshtml文件中

<div class="@tableClass"> 
    <table id="@tableId" class="inner-block-table low-blood-table home-ver" data-url="data2.json" data-pagination="true" data-search="true">
        <thead>
        <tr>
            <!-- sortable -->
            <th data-field="diaryEntry" class="diaryEntry" data-sortable="true" data-sorter="diaryEntry">@diaryEntryHeader @if (isViewAllTable)
                                                                                                                           { <i class="fa fa-sort"></i>}</th>
            <th data-field="recordedSymptoms" class="recordedSymptoms" data-sortable="true" data-sorter="recordedSymptoms">@recordedSymptomsHeader  @if (isViewAllTable)
                                                                                                                                                   { <i class="fa fa-sort"></i>}</th>
            <th data-field="whileSleeping" class="whileSleeping">@whileSleepingHeader</th>
            <th data-field="activity" class="activity">@activityHeader</th>
            <th data-field="impact" class="impact">@impactHeader</th>
        </tr>
    </thead>

    <tbody>
          @foreach (DiaryEntry item in Model.DiaryEntries)
          {
              //Mytask page--Show last one Entry in SP, View all should show all entries
        <tr class="@if (i++ == 0 || isViewAllTable)
                   { @firstRowClass }">
                <td class="diaryEntry">
                <div class="heading-label sm-heading-label-visible">@diaryEntryHeader</div>
                <div class="heading-desc">@item.EntryDate.ToShortDateString()</div>
            </td>
            <td class="recordedSymptoms">
                <div class="body-label">@recordedSymptomsHeader:</div>
                <div class="body-desc status">
                    @{ if (item.DateOfSymptom != "Not Applicable")
                       {

                            @item.DateOfSymptom
                      <span>@item.TimeOfSymptom</span>
                    }
                    else
                    {
                        <span>Not Applicable</span> 
                       }
                    }
                </div>
            </td>
            <td class="whileSleeping">
                <div class="body-label">@whileSleepingHeader</div>
                <div class="body-desc">@item.SymptomWhileSleeping</div>
            </td>
            <td class="activity">
                <div class="body-label">@activityHeader:</div>
                <div class="body-desc">
                      @item.Activity
                </div>

            </td>
            <td class="impact">
                <div class="body-label">@impactHeader:</div>
                <div class="body-desc">
                    @item.Impact
                </div>
            </td>
        </tr>
          }
    </tbody>
</table>

在我的js文件中

 var filterByDate = false;
var table = $('#GridWithPaging').dataTable({
    "columnDefs": [{"targets": [2,3,4], "orderable": false}],
    //responsive: true,
    //"aoColumns": [
    //            null,
    //            null,
    //            { "bSortable": false },
    //            { "bSortable": false },
    //            { "bSortable": false }
    //],
    "pagingType": "simple_numbers",
    "sPaginationType": "bootstrap",
    "oLanguage": {
        "sInfo": "Showing  _START_ - _END_ out of _TOTAL_ event logs from:",
        "sInfoFiltered": ""
    },

    //"scrollX": true,
    //"scrollY": false,
    //dom and table tools are required to show download buttons
    //"dom": 'T<"clear">lfrtip',
    "sEmptyTable": "No diary entries!",
    "iDisplayLength": 10,
    "dom": '<"top"<"col-xs-12 col-sm-8 show-results-area"i<"gridtoolbar">>>rt<"text-center"p><"clear">',
    //"sDom": '<"row view-filter"<"col-sm-12"<"pull-left"il><"clearfix">>>t<"row view-pager"<"col-sm-12"<"text-center"p>>>',
    tableTools: {
        "sSwfPath": "../swf/copy_csv_xls_pdf.swf",
        "aButtons": [
            {
                "sExtends": "xls",
                //"sTitle": "ExportToExcel",
                "sFileName": "TableTools - *.xlsx",
                "sButtonText": "ExportToExcel"
            },
            {
                "sExtends": "pdf",
                //"sTitle": "ExportToPDF"
                "sFileName": "TableTools - *.pdf",
                "sButtonText": "ExportToPDF"
            }
        ]
    }
    //"jQueryUI": true,
    //"scrollCollapse": true
});

现在在排序其他浏览器时给出预期结果,但在IE中,数据计数变为零。

是问题所在
<div class="heading-label sm-heading-label-visible">@diaryEntryHeader</div>

在第一个tbody&gt; tr&gt; td 上面的div在IE中引起了问题。此div仅在具有媒体查询css的智能手机中可见 无论如何排序jQuery dataTable,以便它忽略第一列中的第一个div 我认为我们必须在以下方面给出一些条件:

"columnDefs": [{"targets": [2,3,4], "orderable": false}],

OR

"aoColumns": [
  null,
  null,
  { "bSortable": false },
  { "bSortable": false },
  { "bSortable": false }
],

非常感谢任何建议

0 个答案:

没有答案