首頁 >web前端 >js教程 >DataTables新增和刪除等操作實例

DataTables新增和刪除等操作實例

零下一度
零下一度原創
2018-05-18 11:06:551802瀏覽

下面小編就為大家帶來一篇DataTables新增額外的查詢參數和刪除columns等無用參數實例,程式碼如下:

//1.定义全局变量
var iStart = 0, searchParams={};
//2.配置datatable的ajax配置项
"ajax": {           
"url": "/user/query",           
"type": "POST",           
//动态请求参数设置,会应用到每次请求   
"data": function (d) {               
//删除多余请求参数   
for(var key in d){                   
if(key.indexOf("columns")==0||key.indexOf("order")==0||key.indexOf("search")==0){ //以columns开头的参数删除   
delete d[key];
                   }
               }               
               //附加查询参数   
               if(searchParams){
                   $.extend(d,searchParams); //给d扩展参数               
                   }
           },           
           //数据源处理(当数据加载完毕时触发)   
           "dataSrc": function ( json ) {
               iStart = json.start + 1; //起始行号   
               return json.data;
           }
       }
       //3.查询按钮绑定点击事件
       /**
        * 搜索     
        */
        $('.search').click(function () {
        reloadTable();
    });
    //4.刷新表格方法
    /**
     * 重新加载表格,刷新页码 
     */
     function reloadTable() {//希望搜索一次附加参数,修改搜索条件后,如果不点击搜索按钮,切换页码仍使用上次参数
     var number = $("#number").val();
     var name = $("#name").val();
    searchParams.number = number;
    searchParams.name = name;
    var table = $('#userTable').DataTable();
    table.ajax.reload();
}
//5.刷新表格,页码不变方法
/**
 * 刷新表格,不改变页码 
 */
 function  refreshTable() {
 var table = $('#userTable').DataTable();
    table.draw(false);
}
//6.跳页实现
$('#example').DataTable().page(5).draw(false)
或者
$('#example').DataTable().page(5).draw('page')


以上是DataTables新增和刪除等操作實例的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn