首先一個搜索的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(); });
加上紅色的就可以了。好簡單。。我都感到意外了。