Need to add custom table on datatable also require date-range using database.

ihemant

Hi I am asking this question in reference of "http://jquery-datatables-column-filter.googlecode.com/svn/trunk/external.html". I need to add a custom table with datatable where I need to add a custom filter to date such that user can add start date and end date and filter results from database. I have a database with over 70,000 records.

So far I tried using the link mentioned, but table never appear on the screen.

<link href="<?php echo BASEURL;?>css/jquery.dataTables.css" rel="stylesheet">
lib/jquery.dataTables.min.js">
js/jquery-ui.js">
<script src="<?php echo BASEURL;?>js/jquery.dataTables.columnFilter.js"></script>

 <script type="text/javascript">
$(window).load(function() {
    transactionInfo();

});
function transactionInfo(){

    $(".transactionInfo").dataTable({
      //  "scrollX":300,
        //"bFilter":true,
        "bRetrieve":false,
        "bDestroy":false,
        "bProcessing": true,
        "bServerSide": true,
        "sDom": "<'row'<'span8'l><'span8'f>r>t<'row'<'span8'i><'span8'p>>",
        "sAjaxSource":"<?php echo BASEURL;?><folder>/<method>",
    }).columnFilter({aoColumns:[
            { sSelector: "#paymentDate",type:"date-range" },
            { sSelector: "#itemName",type:"text" },
            { sSelector: "#amount", type:"number-range" },
            ]}
        );
    }

</script>
<style>
body {
margin: 0;
padding: 0;
color: #333;
background-color: #fff;
}

div.container {
min-width: 980px;
margin: 0 auto;
}

</style>

User Transaction Details

Payment Date	Item Name	Amount
Loading data from server...

ihemant

I worked on an another solution the same day I posted this, and it worked. For reference I'll answer the query:

I removed columnFilters i.e.
.columnFilter({aoColumns:[
{ sSelector: "#paymentDate",type:"date-range" },
{ sSelector: "#itemName",type:"text" },
{ sSelector: "#amount", type:"number-range" },
]}
)
and added my custom parameters in "sAjaxSource" url as query string.
also set "bDestroy" to true.
Then created a custom form and triggered it using a button. As user will be able to fill all this criteria (good if in case of multiple custom fields). and trigger my function "transactionInfo()" on button click. For a single column you can also trigger this function on keypress or any other suitable event.

It works :)

Its benifits: You can customize your fields/table easily, add any parameter and can controll them.

Don't know its bad effects though. I didn't get any error in functionality or delays in functionality.