This blog is useful to all my friends who are working on the .Net Technology and wants to enhance their skills as well their problem solving ability.

Monday, July 21, 2014

Jquery DataTable with Drill Down option

IN YOUR VIEW USE THE BELOW FUNCTION

Write below function in your document.ready event, this will bind "+" td.control img with function which will open drill down.

$("#myDataTable").on("click", "td.control img", function (event) {

                var nTr = this.parentNode.parentNode;
                var i = $.inArray(nTr, anOpen);

                if (i === -1) {

                    $('img', this.parentNode).attr('src', sImageUrl + "drildown_close.jpg");
                    oTable.fnOpen(nTr, fnFormatDetails(oTable, nTr), '');
                    anOpen.push(nTr);
                }
                else {
                    $('img', this.parentNode).attr('src', sImageUrl + "drildown_open.jpg");
                    oTable.fnClose(nTr);
                    anOpen.splice(i, 1);
                }
            });

  Below function used to open a div as drill down with passed parameter and data which return by method.

            function fnFormatDetails(oTable, nTr) {
                var sOut = '';
                $('#DivLoading').show();
                $.ajax({
                    "url": '@Url.Content("method name to fetch data")',
                    data: { para: paraID },
                    "async": false,
                    cache: false,
                    "dataType": "text",
                    "success": function (json) {
                        sOut = json;
                        $('#DivLoading').hide();
                    },
                    error: function (response) {
                        //// debugger;
                    }
                });

                return sOut;
            }

            /*Functions used for nasted data binding END*/

You can use this function in PHP or .NET code , as this is Jquery stuff so you don't need to worry about any platform.