datatable 自定義搜索


首先一個搜索的input框

      <div class="text-c">
                用戶名稱:<input type="text" class="input-text" style="width:250px" placeholder="輸入用戶名稱" id="name"
                       name="name">
                <button type="submit" class="btn btn-success" onclick="search()"><i class="icon-search"></i> 搜用戶
                </button>
            </div>

給那個按鈕一個點擊事件onclick="search()"

js如下

 var table;
    function search() { table.draw(); }
    $(function () {
        if (table == null) {
            table = $('.table-sort').DataTable({
                "aaSorting": [[2, "desc"]],//默認第幾個排序
                "bStateSave": true,//狀態保存
                "serverSide": true,  //啟用服務器端分頁
                "searching": false,
                "sAjaxSource": "/dataGrid.json",
                "sPaginationType": "full_numbers",      //翻頁界面類型
                "oLanguage": {                          //漢化
                    "sLengthMenu": "每頁顯示 _MENU_ 條記錄",
                    "sZeroRecords": "沒有檢索到數據",
                    "sInfo": "當前數據為從第 _START_ 到第 _END_ 條數據;總共有 _TOTAL_ 條記錄",
                    "sInfoEmtpy": "沒有數據",
                    "sInfoFiltered":'',//設置為空 相當於刪除 (從 _MAX_ 條中過濾)
                    "sProcessing": "正在加載數據...",
                    "oPaginate": {
                        "sFirst": "首頁",
                        "sLast": "尾頁"
                    }
                },
                "fnServerData": function (sSource, aoData, fnCallback) {
                   aoData.push({"name":"name","value":$("#name").val()})
                    $.ajax({
                        "dataType": 'json',
                        "type": "POST",
                        "url": sSource,
                        "data": aoData,
                        "success": fnCallback
                    });
                },
                //列表表頭字段
                "columns": [
                    {
                        "mData": "id",
                        "mRender": function (data, type, full) {
                            return '<input type="checkbox" value="' + data + '" name="checkbox">'
                        }
                    },
                  ...//此處省略
                ]
            });
      }
      table.draw();
    });

加上紅色的就可以了。好簡單。。我都感到意外了。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM