option ajax data 根据参数查询表格数据

DataTables中文网 21 April 2016

Tags: 不定时一讲


参数详解连接 ajax.dataOption ajax.data不定时一讲

这连续几天讲的都是关于dt怎么取数,今天讲讲怎么传参数给服务器。平时我们都有这样的应用场景,比如根据时间,或者input框的值作为查询条件显示表格数据 基本用法:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var table = $("#tableid").DataTable({
    ajax:{
        url:"data.action",
        type:"POST",
       data:{
            beginDate:"2016-04-18",
            endDate:"2016-04-21"
        }
    },
    columns:[
        {data:"name"},
        {data:"age"}
    ]
});

看到上面的代码,我不得不又把jQuery的ajax又拿出来说,应为这个可以说就是jQuery的ajax,基本是一样的用法,下面看看jQuery的ajax

1
2
3
4
5
6
7
8
9
10
11
$.ajax({
    url:"data.action",
    type:"POST",
   data:{
        args1:"123",
        args2:"456"
    },
    success:function(result){
        console.log(result);
    }
});

是不是发现是基本一模一样的?不用对比了,其实就是一样的,那么这两段代码的含义就是带上了两个参数,这样在服务器就可以接收到

比如服务器语言是java,那么你可以这么接受

request.getParameter("beginDate");//获取到起始时间,截止时间类同

如果你是php,那么你可以这么接受

$_POST['beginDate'];

这样你就可以根据页面传来的参数对数据进行处理,达到根据条件改变表格里的数据的效果。不过上面的代码都是传静态的值, 平时应用更多的是从一个时间控件或者input取值,那么就这样做

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var table = $("#tableid").DataTable({
    ajax:{
        url:"data.action",
        type:"POST",
        data:{
            beginDate:$("#beginDate").val(),
            endDate:$("#endDate").val()
        }
    },
     columns:[
         {data:"name"},
         {data:"age"}
     ]
});

如果大家也有小技巧和使用经验,欢迎给我发邮件 thxopen@datatables.club


百度站内搜索

Google站内搜索

赞助我们

赞助我们

您的支持,将是我们前进的最大动力……