美文网首页
datatables的自定义传参

datatables的自定义传参

作者: answer6 | 来源:发表于2017-12-29 10:09 被阅读0次

    自定义搜索:其实也就是可以把自己需要搜索的值传到服务器,服务器做对应处理,也就是自定义传参

    给两个自定义的实例


    1. preXhr
     var tables_comments = jQuery('#table_comments_log').DataTable({});
      tables_comments
                            .on('preXhr.dt', function ( e, settings, data ) {
                                // 额外传参
                                data.ctime = jQuery('#start-date1').val();
                                data.etime = jQuery('#end-date1').val();
                            })
    

    1. ajax的传参


      自定义传参demo

    题外话

    一个页面多个搜索 要用到 jQuery.fn.dataTable.ext.search.pop();
    e.g.

    使用场景
      // 这个是多过滤
                    jQuery('#start-date1,#end-date1').change(function() {
                        tables_comments
                            .on('preXhr.dt', function ( e, settings, data ) {
                                data.ctime = jQuery('#start-date1').val();
                                data.etime = jQuery('#end-date1').val();
                            })
                        jQuery.fn.dataTable.ext.search.push(
                            function( settings, data, XdataIndex ) {
                            // console.log( data )
                                var start          = new Date( jQuery("#start-date1").val().replace(/-/g,"/") ).setHours(0,0,0,0); // 15000000000000000
                                var end            = new Date( jQuery("#end-date1").val().replace(/-/g,"/") ).setHours(0,0,0,0);   // 1500000000000000
                                var ymd_date       = data[10];
                                var ymd            = ymd_date.replace(/-/g,"/").substr(0,10);
                                var search         = new Date( ymd );
                                if ( ( isNaN (start) && isNaN (end) ) ||
                                    (isNaN(start) && search <= end) ||
                                    (search>= start && isNaN(end) ) ||
                                    (start <= search && search <= end )
                                ){
                                    return true;
                                }else{
                                    return false;
                                }
                            }
                        );
                        tables_comments
                        .draw();//按时间段筛选完重绘表格
                        jQuery.fn.dataTable.ext.search.pop();
                    })
    

    相关文章

      网友评论

          本文标题:datatables的自定义传参

          本文链接:https://www.haomeiwen.com/subject/gytugxtx.html