Home > Web Front-end > JS Tutorial > Examples of operations such as adding and deleting DataTables

Examples of operations such as adding and deleting DataTables

零下一度
Release: 2018-05-18 11:06:55
Original
1827 people have browsed it

The following editor will bring you an example of adding additional query parameters and deleting useless parameters such as columns in DataTables. The code is as follows:

//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')
Copy after login


The above is the detailed content of Examples of operations such as adding and deleting DataTables. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template