[jquery][datatable]簡易使用DataTable查詢套件,明細按鈕開窗,實做查詢結果清除按鈕

2022-03-23

6367
0
DataTablesNet學習系列
2022-07-04

於Datatables的官網將相關的.js以及.css下載到專案

再來在你想要進行查詢DataTables的view加上include這個.js以及.css檔：

然後在要進行查詢的view的.cshtml加入查詢的按鈕以及最後顯示查詢結果的table以及隱藏欄位hidAppPath：
ps. 當然隱藏欄位hidAppPath也可以改放在_Layout.cshtml，讓所有view都可以使用。
ps.下面順便附上範例的排版
20220330 補充：html加上開窗明細的按鈕功能，請搜尋下面這段程式碼關鍵字（//datatable裡面的開窗明細按鈕用的（隱藏欄位當成pk））

<!--隱藏的iis應用程式的路徑-->
<input type="hidden" id="hidAppPath" value="@Url.Content("~/")" />

<div class="row" style="background-color: lightgray; border: ridge;">
    <form>
        <div class="row">
            <div class="form-group row" style="font-weight: bold; font-size: x-large; margin-bottom: 15px;">
                <label class="col-form-label">【搜尋條件】</label>

            </div>
        </div>
        <div class="row">
            <div class="col-8">


                <div class="form-group row" style="margin-bottom:10px;margin-left:1px;">

                    <label for="txtStartDate" class="col-form-label">日期範圍：</label>
                    <div class="col-4">
                        @{
                            string startDate = DateTime.Now.ToString("yyyy") + "01";

                        }
                        <input type="text" class="form-control" id="txtStartDate" onkeypress="return isNumber(event,'txtStartDate')"
                               value="@startDate"
                               placeholder="格式YYYMM 202201">

                    </div>
                    <div class="col-1">
                        ～
                    </div>
                    <div class="col-4">
                        <input type="text" class="form-control" id="txtEndDate" onkeypress="return isNumber(event,'txtEndDate')"
                               value=""
                               placeholder="格式YYYMM 202201">

                    </div>

                </div>


            </div>
            <div class="col-4">
                <div class="form-group row" style="margin-bottom:10px;">
                    <label for="ddlStatus" class="col-form-label">填寫狀態：</label>
                    <div class="col-6">
                        <select class="form-control" id="ddlStatus">
                            <option value="" selected>請選擇</option>
                            <option value="0">填寫中</option>
                            <option value="1">已填寫</option>
                        </select>

                    </div>
                </div>

            </div>
        </div>
        <div class="row">
            <div class="col-4">


            </div>
            <div class="col-5">


            </div>
            <div class="col-2  text-right">
                <div class="form-group row" style="margin-bottom:10px;">

                    <button type="button" class="btn btn-primary col-auto" id="btnQuery">查詢</button>&nbsp;
                    <button type="button" class="btn btn-danger col-auto" id="btnReset">清除</button>
                </div>


            </div>
            

        </div>

    </form>

</div>

<div class="row" style="background-color: whitesmoke; border: ridge;">
    <div class="col-12">
        <table id="example" border="1" class="display table-striped " style="width:100%">
            <thead class="table-info">
                <tr>
                    <th>年度</th>
                    <th>序號</th>
                    <th>日期</th>
                    <th>排序</th>
                    <th>明細</th>
                    <!--//datatable裡面的 開窗明細 按鈕用的（隱藏欄位當成pk）-->
                    <th style="display:none">CompanyCode</th>
                    <th style="display:none">MeetingCode</th>
                </tr>
            </thead>

        </table>
    </div>

</div>

接著於controller設定查詢的程式碼：

[HttpPost]
public ActionResult Query(MyPostModel model)		
{
    
    if (model == null)
    {
        return Json(new EmptyResult());
    }
    MyDbContext dal = new MyDbContext();
    var results = dal.Query(model);//自訂商業邏輯取得db資料
        
    //回傳Json資料
    var returnObj =
        new
        {
            data = results,
            
        };
    
    return Json(returnObj);
}

最後在你要進行查詢的那個view加上下面的javascript語法，即可成功查詢囉
20220330 補充：datatable加上開窗明細的按鈕功能，請搜尋下面這段程式碼關鍵字（//datatable裡面的開窗明細按鈕用的（隱藏欄位當成pk））

$(document).ready(function () {
    //查詢按鈕
    $("#btnQuery").on("click", function (e) {
        e.preventDefault();
        query();
        return false;
    });

	//datatable裡面的 開窗明細 按鈕用的（隱藏欄位當成pk）
    //開啟modal視窗：顯示稽核報表
    $(document).on('click', 'button[name=showModal]', function (e) {
        e.preventDefault();
        var table = $('#example').DataTable();
        var tr = $(this).closest('tr');

        //取得此列的參數，用來傳遞參數到開窗
        var data = table.row(tr).data();

        console.log(data);

        //取得稽核表問題並顯示開窗
        GetMeetingContent(data.CompanyCode, data.MeetingCode, data.Year, data.Seq);
        $("#divMeetingModal").modal('show');

    })
});

function GetMeetingContent(companyCode, meetingCode, year, seq) {
    var appPath = $("#hidAppPath").val();
    return $.ajax({
        type: 'POST',

        url: appPath + 'Admin/GetMeetingContent/',
        data: {
            CompanyCode: companyCode,
            MeetingCode: meetingCode,
            Year: year,
            Seq: seq,
        },

        success: function (resultData) {
            //顯示開窗
            console.log('成功取得db端的data：')
            console.log(resultData);
            //do something you want

            //顯示開窗
            $("#divMyModal").modal('show');
        },
        error: function (error) {
            console.log(error);
            alert('出現意料之外的錯誤，請查看F12的writeLog()紀錄。');
        },
    });
}

//查詢
function query() {
    var appPath = $("#hidAppPath").val();

    $('#example').DataTable({
        autoWidth: false,//關閉自動調整寬度，改成手動
        //datatable查詢套件全面中文化
        language: {
            emptyTable: "無資料",
            info: "顯示 _START_ 至 _END_ 筆資料，共 _TOTAL_ 筆",
            lengthMenu: "顯示 _MENU_ 筆資料",
            paginate: {
                "first": "First",
                "last": "Last",
                "next": "下一頁",
                "previous": "上一頁"
            },

        },
        ajax: {
            method: "post",//或post，自由決定，影響到Server端用FormCollection取值或Request.QueryString取得DataTables傳遞的資訊
            url: appPath + 'Admin/MeetingQuery/',
            data: {
                StartDate: $('#txtStartDate').val(),
                EndDate: $('#txtEndDate').val(),

            },
        },
        searching: false,  //關閉filter功能
        destroy: true,//每次都清空datatable並重新載入db來的資料
        columns: [ //指定Server端的資料行繫結名稱
            { data: "Year" },
            { data: "Seq" },
            { data: "MeetingDate" },
            { data: "MeetingOrder" },

            //datatable裡面的 明細 按鈕用的（隱藏欄位當成pk）
            { data: "CompanyCode" },//這個是（明細按鈕），隨便拿個CompanyCode湊數即可
            { data: "CompanyCode" },
            { data: "MeetingCode" },
            

        ],
        //以下是編輯功能，將於後續文章繼續介紹
        columnDefs: [

            {
                targets: 0,
                width: "20%",
                className: "text-center",
            },
            {
                targets: 1,
                width: "20%",
                className: "text-center",
                render: function (data, type, row, meta) {
                    if (data == '1') {
                        return '已完成';
                    }
                    else {
                        return '處理中';

                    }
                }
            },
            {
                targets: 2,
                width: "20%",
                className: "text-center",
            },

            {
                targets: 3,
                width: "20%",
                className: "text-center",
            },


            {
                targets: 4,
                //width: "10%",//最後一個欄位不用設定寬度，因為設定也不會作用，他會使用最後剩下的％當成他的寬度
                className: "text-center",
                render: function (data, type, row, meta) {
                    return '<button name="showModal" type="button" class="btn btn-success col-auto">明細</button>';
                }
            },

            //datatable裡面的 開窗明細 按鈕用的（隱藏欄位當成pk）
            {
                targets: 5,
                visible: false,
                searchable: false,
            },
            {
                targets: 6,
                visible: false,
                searchable: false,
            },
            

        ],
        order: [[1, "asc"]],//依照第一個欄位排序
    });
}

function isNumber(evt, objId) {
    evt = (evt) ? evt : window.event;
    var charCode = (evt.which) ? evt.which : evt.keyCode;
    if (charCode > 31 && (charCode < 48 || charCode > 57)) {
        return false;
    }
    if ($('#' + objId).val().length >= 6) {
        return false;
    }
    return true;
}

20220330補充datatable加上開窗明細的按鈕功能，請搜尋下面這段程式碼關鍵字（//datatable裡面的開窗明細按鈕用的（隱藏欄位當成pk））
以下是Controller端的c#程式碼

[HttpPost]
public ActionResult GetMeetingContent(AdminMeetingModalPostModel model)
{
	if (model == null)
	{
		return Json(new EmptyResult());
	}

	dbContextAdmin dal = new dbContextAdmin();
	var modalData = dal.GetMeetingContent(model);

	return Json(modalData);

}

執行結果：

20220330補充datatable加上開窗明細的按鈕功能，請搜尋下面這段程式碼關鍵字（//datatable裡面的開窗明細按鈕用的（隱藏欄位當成pk））
以下是點擊datatable的明細按鈕之後開窗的執行結果

這篇大概是這樣…

ps.2022/04/26 1428
補充（清除）按鈕在datatable的實做方式：
按下此按鈕之後，將會清除畫面上查詢出來的結果的table以及所有查詢條件

//清除按鈕
$("#btnReset").on("click", function (e) {
    e.preventDefault();
    $('input[type=text]').val('');
    $('select').val('');
    var table = $('#example').DataTable();//清除datatable
    table
        .clear()
        .draw();
    return false;
});

參考資料：
DataTables | Table plug-in for jQuery

jQuery

回首頁

kevinya

低調

[jquery][datatable]簡易使用DataTable查詢套件,明細按鈕開窗,實做查詢結果清除按鈕

標籤雲