Question

我正在处理数据表。例如，我要进行分页，例如我有一个具有分页的数据表。我有一个搜索选项，但分页在搜索中不起作用

Answer 1

<input class="btn btn-secondary" type="button" value="Show TheResults" id="theBtnSearch" />

$("#theBtnSearch").click(function () {
    if ($.fn.dataTable.isDataTable('#thedatatab')) {
        table = $('#thedatatab').DataTable();
        //https://datatables.net/reference/api/ajax.reload()
        table.ajax.reload();
    }
});

<div class="DataTableClass" id="TheHeaderStyle" style="width: 100%">
                <table id="thedatatab'" class="display table table-striped table-bordered">
                    <thead>
                        <tr>
                            <th><%: Html.DisplayNameFor(r => r.fieldA)%></th>
                            <th><%: Html.DisplayNameFor(r => r.fieldB)%></th>
                        </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
            </div>

被调用的方法

public JsonResult GetTheData(DTParameters param)
{
    try
      {
         //call stored procedure with parms from DTParameters
         //DTParameters comes with your datatables download, if you did it right
         return Json(result);
      }
}

您的DataTable声明

$('#thedatatab').DataTable({
    "pagingType": "full",
    "serverSide": true,

    "oLanguage": {
        "sSearch": "Filter Search Results:" //http://legacy.datatables.net/usage/i18n#oLanguage.sSearch
    },

    "ajax": {
        "type": "POST",
        "url": '/Case/GetTheData',
        "contentType": 'application/json; charset=utf-8',
        'data': function (data) {
            //http://stackoverflow.com/questions/24499116/how-to-pass-parameters-on-reload-of-datatables
            //all the search parms here
            data.searchParm = $("#searchParm").val();
            return data = JSON.stringify(data);
        }
    },
    "processing": true,
    "columns": [
    { "data": "fieldA" },
    { "data": "fieldB" },
    ],
    columnDefs: [
       {
           "targets": [0],
           "visible": false,
           "searchable": false
       }
    ],
    "order": [1, "desc"] 
    , "createdRow": function (row, data, index) {
        $(row).click(function () {
            $("#ajaxSpinner").removeClass("HideMeDisplay");
            $("#TheHiddenRowNumber").val(data.FieldA)
            $("form").submit();
        });
    }
});

具有分页和延迟加载的Ajax数据表

1 个答案: